Loading a Css file with Javascript?

[chrisciscoioio]

I am wondering if like my title states I can load a Css file, say based on a Random number.I have been fooling around with it over the past few days and have come to no success.Here is the Javascrip and and in the body tag, I have the Onload="loadRandomCss()" called.

<script type="text/javascript">function loadRandomCss(){	var RandNum = Math.floor(Math.random()*5);	if (RandNum > 0 && RandNum <= 1)	{		document.write('<link rel="stylesheet" type="text/css" href="css/style1.css">'); 		document.write('<link rel="stylesheet" type="text/css" href="css/Red.css">'); 	}		else if (RandNum > 1 && RandNum <= 2)	{		document.write('<link rel="stylesheet" type="text/css" href="/css/style1.css">'); 		document.write('<link rel="stylesheet" type="text/css" href="/css/blue.css">'); 	}		else if (RandNum > 2 && RandNum <= 3)	{		document.write('<link rel="stylesheet" type="text/css" href="/css/style1.css">'); 		document.write('<link rel="stylesheet" type="text/css" href="/css/yellow.css">'); 	}		else if (RandNum > 3 && RandNum <= 4)	{		document.write('<link rel="stylesheet" type="text/css" href="/css/style1.css">'); 		document.write('<link rel="stylesheet" type="text/css" href="/css/green.css">'); 	}}</script>

I want to do this without going server side, because that is what I am trying to do, I am working with this, but it is the same as loading a different Css file based on broswer, which is much more useful.

[hgmme@wa]

couldn't you just fix up your <link> tag till you get to the actual file, at which point you could use javascript to input a style.css file with a random number right (from like 0-10) after "style" but before the period. I'd give an example but I'm a newbie at javascript so it'd take me a little bit to get it figured out, and I'm not on a computer were I could test it...

[justsomeguy]

Don't use document.write. Use the DOM methods to create an element and set the attributes that way. There's an example piece of code on this page:http://cse-mjmcl.cse.bris.ac.uk/blog/2005/...4396539593.html

[chrisciscoioio]

Don't use document.write. Use the DOM methods to create an element and set the attributes that way. There's an example piece of code on this page:http://cse-mjmcl.cse.bris.ac.uk/blog/2005/...4396539593.html

Thanks for the Link very helpful.Here is what I came up with that code snippet, it works to.

<script type="text/javascript">var randNum;var styleSheet;var newStyleSheet;//<![CDATA[if(document.createStyleSheet) {RandNum = Math.floor(Math.random()*5);	if (RandNum > 0 && RandNum <= 1)		{			document.createStyleSheet('./css/red.css');		}			else if (RandNum > 1 && RandNum <= 2)		{			document.createStyleSheet('./css/yellow.css');		}			else if (RandNum > 2 && RandNum <= 3)		{			document.createStyleSheet('./css/green.css');		}			else if (RandNum > 3 && RandNum <= 4)		{			document.createStyleSheet('./css/blue.css');		}	}else 	{RandNum = Math.floor(Math.random()*5);	if (RandNum > 0 && RandNum <= 1)		{			styleSheet = "@import url('./css/red.css ');";		}			else if (RandNum > 1 && RandNum <= 2)		{			styleSheet = "@import url('./css/yellow.css ');";		}			else if (RandNum > 2 && RandNum <= 3)		{			styleSheet = "@import url('./css/green.css ');";		}			else if (RandNum > 3 && RandNum <= 4)		{			styleSheet = "@import url('./css/blue.css ');";							}				// Creates the Style Sheet with the right colour.    		newStyleSheet = document.createElement('link');			newStyleSheet.rel = 'stylesheet';		newStyleSheet.href = 'data:text/css,' + escape(styleSheet );		document.getElementsByTagName("head")[0].appendChild(newStyleSheet);}//]]></script>