Load random CSS on page refresh

I was wondering whats the best way to call a random c开发者_高级运维ss file on page refresh with Javascript?

Many thanks

---

var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";


$(function() {
    var style = link[Math.floor(Math.random() * link.length )];
    $('<link />',{
        rel :'stylesheet',
        type:'text/css',
        href: style
    }).appendTo('head');
});

Edit : Thank you Basil Siddiqui!

var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";


$(function() {
    var style = link[Math.floor(Math.random() * link.length )];
    if (document.createStyleSheet){
        document.createStyleSheet(style);
    }else{
        $('<link />',{
            rel :'stylesheet',
            type:'text/css',
            href: style
        }).appendTo('head');
    }
});

---

If you're using PHP, you can read your CSS directory and pick a random file like this:

<?php
$css_dir = '/css';
$files   = array();

foreach(glob($cssdir.'/*.css') as $file) 
{
    $array[] = $file;
}

echo '<link rel="stylesheet" type="text/css" href="' . array_rand($files, 1) . '">';
?>

---

Thanks for your advice, didn't realise it was possible with a simple line of php and actually found that this method was pretty short and sweet

<link href="/styles/<?php echo mt_rand(1, 5); ?>.css" rel="stylesheet" type="text/css"/>

Found it here, http://forum.mamboserver.com/showthread.php?t=61029

Many thanks

ps. A List Apart also have a pretty simple and brilliant way to switch images, http://www.alistapart.com/articles/randomizer/

---

you can do this by generating random link using just javascript

<p id="demo"></p>

<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

---

Append a <link> element on document.ready.

var randomFileName=Math.random(); // or whatever

$(document).ready(function() {
    $('head').append('<link rel="stylesheet" type="text/css" href="' + randomFileName + '.css">');
});

Untested. As mentioned above, it is probably a better (read: more compatible) idea for a server-side script to spit out a random file name directly in the page's HTML instead of using JS trickery.

---

If you want to use javascript the best way is to load all the random styles in a single file in the normal way.

Then prepend all the random css with a number such as:

.random-1 h1 {
    color: blue;
}
.random-2 h1 {
    color: red;
}
/* ... etc... */

Then simply add a random class to the body with javascript.

document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1);

This should limit loading and rendering issues, and you don't need to worry about when to call the javascript. (plus you have the option to change to another random style with more javascript)

(Rendering issues will depend on what kind of changes you are making - although this is no different from the hiding and showing of DOM objects you see on many websites.)