Random CSS via JS

Question

Hi Guys,

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?

Answer 1

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

Answer 2

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]);

Answer 3

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

Answer 4

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 ;
}

Answer 5

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);
}

Answer 6

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

Answer 7

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

Answer 8

A nit-pick perhaps, but you probably want:

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

Answer 9

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.