I am trying to rotate random CSS sheets via JS - I have the following script but when I am using it - it doesnt seem to work ?

function getRand(){
    return Math.round(Math.random()*(css.length-1));
}
var css = new Array(
'<link rel="stylesheet" type="text/css" href="css/1.css">',
'<link rel="stylesheet" type="text/css" href="css/2.css">',
'<link rel="stylesheet" type="text/css" href="css/3.css">',
'<link rel="stylesheet" type="text/css" href="css/4.css">'
);
rand = getRand();
document.write(css[rand]);

Appreciate any help?

I am trying to rotate random CSS sheets via JS - I have the following script but when I am using it - it doesnt seem to work ?

function getRand(){
    return Math.round(Math.random()*(css.length-1));
}
var css = new Array(
'<link rel="stylesheet" type="text/css" href="css/1.css">',
'<link rel="stylesheet" type="text/css" href="css/2.css">',
'<link rel="stylesheet" type="text/css" href="css/3.css">',
'<link rel="stylesheet" type="text/css" href="css/4.css">'
);
rand = getRand();
document.write(css[rand]);

Appreciate any help?

• javascript
• css

• hmm not sure - it aint working for me :( – Tom Commented Aug 7, 2009 at 14:11
• would you care to tell us what browsers you're using to test this? – erjiang Commented Aug 7, 2009 at 14:17
• What part of the HTML document is the javascript in? Do all the CSS files exist? Are they all different? Can you tell the difference between them? Are they all valid CSS documents? Do you have other javascript on the page that breaks this javascript? Do you have other CSS on the page that overwrites the random CSS? – Rob Commented Aug 7, 2009 at 14:17
• yep thanks guys - was a small problem with the CSS. Have to make sure that the element I was changing (aka background) wasnt contained within the style sheet. i.e. have to had a core style sheet - then seperate style sheets with the background element in them. This then rotates the background and works! :) – Tom Commented Aug 7, 2009 at 14:34

9 Answers 9

Try to create the link element programmatically and appending it to the head:

function applyRandCSS(){
  var css = ["css/1.css", "css/2.css", "css/3.css", "css/4.css"];
  var randomFile = css[Math.round(Math.random()*(css.length-1))];
  var ss = document.createElement("link");

  ss.type = "text/css";
  ss.rel = "stylesheet";
  ss.href = randomFile;

  document.getElementsByTagName("head")[0].appendChild(ss);
}

The page is already rendered when you "add" the stylesheet. This type of substitution is best done on the server.

I'm not a JavaScript expert, but maybe it doesn't find css inside the function. So you have to declare it before the function ?

var css = new Array(
'<link rel="stylesheet" type="text/css" href="css/1.css">',
'<link rel="stylesheet" type="text/css" href="css/2.css">',
'<link rel="stylesheet" type="text/css" href="css/3.css">',
'<link rel="stylesheet" type="text/css" href="css/4.css">'
);

function getRand(){
    var css
    return Math.round(Math.random()*(css.length-1));
}

rand = getRand();
document.write(css[rand]);

There's a very nice technique for switching stylesheets with jQuery here. It can be easily combined with your randomizer.

No, it works.

in cssTest.html:

HI!

<script>
function getRand(){
    return Math.round(Math.random()*(css.length-1));
}
var css = new Array(
'<link rel="stylesheet" type="text/css" href="1.css">',
'<link rel="stylesheet" type="text/css" href="2.css">',
'<link rel="stylesheet" type="text/css" href="3.css">',
'<link rel="stylesheet" type="text/css" href="4.css">'
);
rand = getRand();

document.write( "Choosing " + rand ) ;
document.write(css[rand]);

</script>

HELLO!

in 1.css

*
{
  color: Red;
}

in 2.css

*
{
  border: solid 2px green ;
}

in 3.css

*
{
  font-size: 40em;
}

in 4.css

*
{
  border: solid 5px red ;
}

Unless you have to do it client side for some reason, do it on the server.

The link element must be inside the head element for it to work, document.createElement /element.append

A nit-pick perhaps, but you probably want:

function getRand() {
    return parseInt(Math.random()*css.length);
}

If your CSS doesn't vary greatly, you could do as I did and have the CSS randomly generated each time the page is loaded

    function mutate() {

var font = new Array();
    font[0] = 'monospace';
    font[1] = 'arial';
    font[2] = 'verdana';
    font[3] = 'trebuchet-ms';
    font[4] = 'lucida grande';
    font[5] = 'calibri';
    font[6] = 'bitstream charter';
    font[7] = 'liberation sans';
    font[8] = 'Mona';
    font[9]= 'MS Pgothic';
    font[11]= 'helvetica';
    font[11]= 'Dejavu sans';
    var whichbfont = Math.floor(Math.random()*(font.length));

/* Random bgcolor maker */
function bgcolour() {
   var bred   = Math.floor(128+Math.random()*128);
   var bgreen = Math.floor(128+Math.random()*128);
   var bblue  = Math.floor(128+Math.random()*128);
   return  'rgb('+bred+', '+bgreen+', '+bblue+')'; 
}
var bgcolor = bgcolour();

/* Random bgcolor maker */
function bcolour() {
   var red   = Math.floor(Math.random()*128);
   var green = Math.floor(Math.random()*128);
   var blue  = Math.floor(Math.random()*128);
   return  'rgb('+red+', '+green+', '+blue+')'; 
}
var bcolor = bcolour;

document.write ('<style type=\"text/css\">'+
'b,a \n'+
'{font-family: '+font[whichbfont]+' !important; color: '+bcolor+' !important;}\n'+
'body {background-color: '+bgcolor+';!important}\n'+
'</style>');
}

Except yours would obviously be tailored to suit your own site.