m looking for a Javascript function or similar which will automatically load a different stylesheet randomly each time a page is visited.

I have found several which work on user selection, or on browser size. My Javscript coding isn't up to adapting them sad

If anyone knows of an example, I'd appreciate the knowledge. It's just so that the user goes "Ohooh "

JavaScript is not well-suited to this task. You need to use a server-side language to render the style sheet link dynamically.

Hi there,

first i am agree with tgreer,

well but you can use JavaScript to do this functionality,

here the is Code:
page.html :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Random Css Using Javascript</title>
<script language="JavaScript" type="text/javascript" src="randomCss.js"></script>
</head>
<body>
<table width="100%" border="0" cellspacing="3" cellpadding="3">
  <tr>
    <td height="153"><div align="center">StyleSheet Will change on every reload of this page</div></td>
    <td><div align="center">To view effect Press F5 </div></td>
  </tr>
</table>
</body>
</html>

randomCss.js :

function get_randomCssNum()
{
    var ranCssNum= Math.floor(Math.random()*5);
	//var ranCssNum= Math.floor(Math.random()*Number of CSS you Have);
    return ranCssNum;
}

function getaCss()
{
   var whichCss=get_randomCssNum();

    var cssName=new Array(5)
     // var cssName=new Array(Number of CSS you Have)
     cssName[0]="<link rel='stylesheet' type='text/css' href='a.css'>";
     cssName[1]="<link rel='stylesheet' type='text/css' href='b.css'>";
     cssName[2]="<link rel='stylesheet' type='text/css' href='c.css'>";   
     cssName[3]="<link rel='stylesheet' type='text/css' href='d.css'>";
     cssName[4]="<link rel='stylesheet' type='text/css' href='e.css'>";
     //I am using 5 CSS files in this example. you can add or remove ;)
     //for Add more CSS just add line like this 
     //cssName[Next Number]="<link rel='stylesheet' type='text/css' href='CSS FILE URL'>";
  	return cssName[whichCss]
  }
  document.write(getaCss());

example :http://www.katarey.com/downloads/randomCss/

I hope this will useful or you!

Best Regards,
Rahul Dev

It is 6 years old thread!!!

Anyway, to answer why the JavaScript does not really fit to this task because it is pointless. If you are going to expose all of your CSS file names, why bother putting them in an array and random pick one to add to your document? If you said there are overlap CSS, then why not create a theme instead of separated files? In other words, the idea is already flaw, so enforcing by using JavaScript does not gain you anything...

This article has been dead for over six months. Start a new discussion instead.