include external css based on condition

**jigarshah** · 10-09-2006, 08:05 PM

is there any way that i can include external css based on some conditions ?
something like this
if(1)
<link...css1>
else if(2)
<link...css1>

**Twey** · 10-09-2006, 08:18 PM

Yes, you can definitely do it, but there may well be a better way. What's the condition?

**codeexploiter** · 10-10-2006, 04:23 AM

Using JavaScript this can be done

HTML Code:

[U]HTML Source code[/U]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var input = parseInt(prompt('Enter a value',''));

if(input)
	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
</script>
</head>
<body>
<span class="body">This is a test</span>
</body>
</html>

HTML Code:

1.css

.body
{
background-color:#CCFFFF;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

HTML Code:

2.css

.body
{
background-color:#FFFF00;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}

The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

Hope this is what you were looking

**djr33** · 10-10-2006, 04:26 AM

stupid question, but relevant.
Does document.write go where the script is, or does it output at another location?
For example... if you wanted to just output a body paragraph, would you need to place a script in the <body> section? that's certainly not standard, and might give some errors.... so...?

I notice the script is conveniently in place css would normally be located, but might just be a coincidence as both script and css tags go in the head.

**jigarshah** · 10-10-2006, 05:07 AM

its like i want to change skin of my webpage which is based on codeexploiter suggested...actually i tried something similar

**codeexploiter** · 10-10-2006, 05:13 AM

You'll find the following items interesting:

http://www.dynamicdrive.com/dynamici...etswitcher.htm

http://www.gr0w.com/articles/code/cs...vascript_free/

http://www.mikezilla.com/exp0020/exp0020.html

**jigarshah** · 10-10-2006, 07:12 AM

Originally Posted by codeexploiter

Using JavaScript this can be done

HTML Code:

[U]HTML Source code[/U]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
var input = parseInt(prompt('Enter a value',''));

if(input)
	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
</script>
</head>
<body>
<span class="body">This is a test</span>
</body>
</html>

HTML Code:

1.css

.body
{
background-color:#CCFFFF;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
}

HTML Code:

2.css

.body
{
background-color:#FFFF00;
color:#333333;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
}

The Javascript code will include the external CSS files based on the value we store in variable input. If it contains a non-zero value it will include 1.css otherwise it will include 2.css.

Hope this is what you were looking

i did somrthing like this but it gives error

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="script.js" language="Javascript" type="text/javascript"></script>
</head>
<body onload="onload(1);">
<h1>Just hi</h1>
</body>
</html>

HTML Code:

script.js 

function onload(input) {

if(input == 1)
	document.write("<link type='text/css' rel='stylesheet' href='1.css'>");
else
	document.write("<link type='text/css' rel='stylesheet' href='2.css'>");
}

It fails
In FF javascript Console it shows
What i did wrong ?
Error: too much recursion
Source file: file:///home/jigar/Desktop/My%20Document/4.Web%20Design/my%20nvu%20web/select%20script/base.html
Line: 1

**jigarshah** · 10-10-2006, 07:21 AM

Cool...!! thanks....i searched on dynamic drive but couldn't get one...Thanks again

**codeexploiter** · 10-10-2006, 07:37 AM

Two things:

1. change the name of your function defined in script.js file from onload to something else.

2. call the function defined in the .js file from within your head section itself. That is the place to insert the <link> tags.

HTML Code:

<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" src="script.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
onlooad(1); //assuming that the function name defined in script is this no onload
</script>
</head>