Jump to content

Loading a Css file with Javascript?


chrisciscoioio
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...