Load random CSS on page refresh

问题

I was wondering whats the best way to call a random css file on page refresh with Javascript?

Many thanks

回答1:

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

回答2:

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) . '">';
?>

回答3:

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/

回答4:

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>

回答5:

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.

回答6:

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.)

来源：https://stackoverflow.com/questions/3591488/load-random-css-on-page-refresh

标签

javascript

jquery

css

apache

server-side