Javascript 页面刷新时加载随机CSS

我想知道用Javascript在页面刷新时调用随机css文件的最佳方法是什么

非常感谢

在

文档中添加
元素。就绪

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

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

var randomFileName=Math.random（）；//或者别的什么
$（文档）.ready（函数（）{
$（'head'）。追加（''）；
});

---

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

如果您使用的是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) . '">';
?>

var-link=[]；
链接[0]=”http://site.com/css/style1.css";
链接[1]=”http://site.com/css/style2.css";
链接[2]=”http://site.com/css/style3.css";
$（函数（）{
var style=link[Math.floor（Math.random（）*link.length）]；
$('',{
rel:“样式表”，
类型：'text/css'，
href:style
}).appendTo（“head”）；
});

编辑：谢谢巴兹尔·西迪基

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

var-link=[]；
链接[0]=”http://site.com/css/style1.css";
链接[1]=”http://site.com/css/style2.css";
链接[2]=”http://site.com/css/style3.css";
$（函数（）{
var style=link[Math.floor（Math.random（）*link.length）]；
if（document.createStyleSheet）{
document.createStyleSheet（样式）；
}否则{
$('',{
rel:“样式表”，
类型：'text/css'，
href:style
}).appendTo（“head”）；
}
});

谢谢你的建议，我没有意识到用一行简单的php就可以做到这一点，但实际上我发现这个方法非常简短

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

---

您可以通过使用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>


var r=Math.random（）；
var x=document.getElementById（“演示”）
如果（r>0.5）
{
x、 innerHTML=“”；
}
其他的
{
x、 innerHTML=“”；
}
如果要使用javascript，最好的方法是以正常方式将所有随机样式加载到单个文件中

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

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

然后简单地用javascript向主体添加一个随机类

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

这将限制加载和呈现问题，您不必担心何时调用javascript。（此外，您还可以选择使用更多javascript更改为另一种随机样式）

（呈现问题将取决于您所做的更改类型——尽管这与您在许多网站上看到的隐藏和显示DOM对象没有什么不同。）
它必须是Javascript吗？在服务器端，这将更容易，也不那么麻烦。问题是，当Javascript运行时，DOM需要完成，因此浏览器可能已经开始呈现页面。此时更改CSS会破坏此流程，并可能会减慢页面呈现速度，以及用户在浏览器更改样式时看到“闪烁”的速度。不必是javascript，不确定是否要执行此服务器端操作。服务器端将取决于您的服务器技术。如果您更新标签，我们可以提供更多帮助。
nginx
，
apache
，
ruby
，
php
，
asp
或您在后端使用的任何技术，供其他人参考-此方法在href中添加一个随机数，因此无法与css文件同步。@Rob:提出文件名部分留给读者作为练习。：）只是尝试了这种技术，但是没有得到回音，因此没有加载CSS文件。我尝试了这种方法，但是在页面加载后应用了它，所以样式没有得到响应applied@BasilSiddiqui谢谢你的注意。。请参考本指南以获取更多指导！你好！：）这也会使服务器脚本更简单。创建页面时，只需在主体中添加一个类。
document.getElementsByTagName('body')[0].className+=' random-' + Math.floor((Math.random() * 10) + 1);