Random CSS via JS

Question

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?

would you care to tell us what browsers you're using to test this? — erjiang
– 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
– 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
– Tom, Commented Aug 7, 2009 at 14:34

Christian C. Salvadó · Accepted Answer · 2009-08-07 14:14:04Z

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

answered Aug 7, 2009 at 14:14

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2009-08-07 14:06:38Z

3

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

answered Aug 7, 2009 at 14:06

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Comments

Steve Schnepp · Accepted Answer · 2009-08-07 14:09:20Z

0

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

answered Aug 7, 2009 at 14:09

Steve Schnepp

4,7606 gold badges43 silver badges57 bronze badges

1 Comment

Mutation Person Over a year ago

No, the css will be global so the function will see it

montrealist · Accepted Answer · 2009-08-07 14:12:05Z

0

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

answered Aug 7, 2009 at 14:12

montrealist

5,72012 gold badges50 silver badges72 bronze badges

Comments

bobobobo · Accepted Answer · 2009-08-07 14:13:18Z

0

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

answered Aug 7, 2009 at 14:13

bobobobo

67.9k67 gold badges272 silver badges375 bronze badges

Comments

August Lilleaas · Accepted Answer · 2009-08-07 14:19:38Z

0

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

answered Aug 7, 2009 at 14:19

August Lilleaas

54.7k13 gold badges106 silver badges113 bronze badges

1 Comment

Tom Over a year ago

hey yeah but on simple sites for clients not sure its needed :)

croxmeister · Accepted Answer · 2009-08-07 14:42:55Z

0

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

answered Aug 7, 2009 at 14:42

croxmeister

262 bronze badges

Comments

Marcello Bastea-Forte · Accepted Answer · 2009-08-07 15:17:53Z

0

A nit-pick perhaps, but you probably want:

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

answered Aug 7, 2009 at 15:17

Marcello Bastea-Forte

1,1671 gold badge10 silver badges7 bronze badges

Comments

Jonno_FTW · Accepted Answer · 2009-08-07 15:20:17Z

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.

Collectives™ on Stack Overflow

Random CSS via JS

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related