刷新页面时加载随机CSS

Question

我在想使用JavaScript在页面刷新时调用随机的CSS文件，最好的方法是什么？

非常感谢。

- Rob

---

必须使用 JavaScript 吗？在服务器端处理会更加简单和高效。 - Pekka

这个问题在于当您的Javascript被执行时，必须保证DOM已经完成加载，因此浏览器可能已经开始渲染页面。在此时更改CSS会破坏这个流程，并可能会减慢页面的渲染速度，同时会导致用户看到“闪烁”，因为浏览器正在更改样式。 - Yi Jiang

不一定非得用JavaScript，我不确定这是否需要在服务器端完成。 - Rob

服务器端将依赖于您的服务器技术。如果您更新标签，我们可以提供更多帮助。 - kbrimington

nginx, apache, ruby, php, asp 或者你在后端使用的任何技术 - jigfox

我对在服务器端执行此操作有些不确定，因此可能会继续使用JavaScript，感谢您的帮助 :) - Rob

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

编辑：感谢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');
    }
});

- user372551

---

我尝试过这个，但它是在页面加载后应用的，因此样式不会被应用。 - bsiddiqui

@BasilSiddiqui 感谢您的关注.. 请参考这个教程获取更多指导！祝您有美好的一天！ :) - user372551

Answer 2

如果您正在使用PHP，您可以读取CSS目录并像这样随机选择一个文件：

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

- Evert

---

刚刚尝试了这个技巧，但是没有任何输出，因此CSS文件没有被加载。 - egr103

Answer 3

谢谢您的建议，我之前并没有意识到可以用一行简单的 PHP 代码实现，实际上发现这种方法非常简洁明了。

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

在这里找到了，http://forum.mamboserver.com/showthread.php?t=61029

非常感谢

附言：A List Apart也有一种相当简单而聪明的切换图像的方法，http://www.alistapart.com/articles/randomizer/

- Rob

Answer 4

你可以使用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>

- abozar

Answer 5

在document.ready事件中添加一个<link>元素。

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

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

未经测试。如上所述，对于服务器端脚本而言，直接在页面的HTML中输出随机文件名可能是一个更好（即更兼容）的想法，而不是使用JS技巧。

- josh3736

---

供他人参考 - 此方法在 href 中添加了一个随机数，因此无法与 CSS 文件同步。 - Rob

@Rob：想出文件名的部分留给读者做练习。 :) - josh3736

Answer 6

如果你想使用JavaScript，最好的方法是以正常方式将所有随机样式加载到单个文件中。

然后，在所有随机的CSS前面加上一个数字，例如：

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

然后，只需使用JavaScript向body添加一个随机类即可。

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

这样可以限制加载和渲染问题，您不需要担心何时调用JavaScript。（另外，您可以选择更多JavaScript的随机样式）

（渲染问题取决于您所做的更改类型 - 尽管这与许多网站上看到的DOM对象的隐藏和显示没有区别。）

- Matthew Wilcoxson

---

这也会使您的服务器脚本更简单。只需在创建页面时向body添加一个类即可。 - Matthew Wilcoxson