Question

我正在尝试添加一些css.But我希望它在每次页面加载时更改它（显然我将指定在不同时间加载的内容）

例如有时我想加载

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.edwdwed.com/cursowedwedrsfolder/Tredwedwedwedolll-face.png&#39;
        ), auto !important;
    }
</style>

有时我想加载

<style>
    html, body, a, a:hover {
        cursor:url(&#39;
        http://www.snazzyspace.com/cursorsfolder/MEgusta.png&#39;
        ), auto !important;
    }
</style>

我找到了一种在浏览后随机化内容的方法，但这只适用于图片，而不适用于脚本/ CSS。

Answer 1

工作代码...它在每个页面加载时随机设置背景颜色......

function setCSS(selector, attribute, value) {
    var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
    found = false;

    for (var S = 0; S < document.styleSheets.length; S++){
        if(document.styleSheets[S][cssRuleCode]){
            for(var n = 0; n < document.styleSheets[S][cssRuleCode].length; n++) {

                if(document.styleSheets[S][cssRuleCode][n]["selectorText"] == selector) {
                    if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                        document.styleSheets[S][cssRuleCode][n].style[attribute] = value;
                        found = true;
                        break;
                    }
                }


            }
        }

    }

    if(!found) {
        // Let's add
        for (var S = 0; S < document.styleSheets.length; S++){
            try {
                document.styleSheets[S].insertRule(selector + ' { ' + attribute + ': ' + value + '; }',document.styleSheets[S][cssRules].length);
                break;
            } catch(err){
                try {
                    document.styleSheets[S].addRule(selector, attribute + ': ' + value + ';');
                    break;
                } catch (err){}
            }
        }
    }
}

window.onload = function(){
    urls = ["url('http://www.iwdownload.com/image/1982.png'), auto !important;",
        "url('http://www.iwdownload.com/image/13534.gif'), auto !important;"];
    var rand = Math.floor((Math.random() * urls.length));
    setCSS("html, body, a, a:hover", "cursor", urls[rand]);
};

参考：Changing CSS Values with Javascript

<强>更新

要将body的背景颜色设置为蓝色，请使用

setCSS("body", "background", "blue");

**更新2：Blogger **

对于博客，请将</head>之前的以下内容粘贴到博主模板HTML中。然后重新加载你的博客，背景应该变成随机颜色。

&lt;script type=&quot;text/javascript&quot;&gt;

    function setCSS(selector, attribute, value) {
        var cssRuleCode = document.all ? &#39;rules&#39; : &#39;cssRules&#39;; //account for IE and FF
        for (var S = 0; S &lt; document.styleSheets.length; S++){
            if(document.styleSheets[S][cssRuleCode]){
                for(var n = 0; n &lt; document.styleSheets[S][cssRuleCode].length; n++) {
                    if(document.styleSheets[S][cssRuleCode][n][&quot;selectorText&quot;].indexOf(selector) != -1) {
                        if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                            document.styleSheets[S][cssRuleCode][n].style[attribute] = value;

                            break;
                        }
                    }
                }
            }

        }
    }

    window.onload = function(){
        colors = [&quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, &quot;yellow&quot;, &quot;orange&quot;, &quot;white&quot;];
        var rand = Math.floor((Math.random() * colors.length));
        setCSS(&quot;body&quot;, &quot;background&quot;, colors[rand]);
    };

&lt;/script&gt;

Answer 2

我建议您为class标记为差异<body>准备css，例如：

<强> CSS

body.style1{...}
body.style2{...}
...

用javascript操作它

<强> JS

var rand = Math.floor((Math.random()*NumberOfYourStyle)+1);
var style = "style" + rand;
document.getElementsByTagName('body')[0].className+=style;

Working example

Answer 3

您可以使用模板引擎动态生成CSS。

例如，使用Velocity代替纯CSS，这是一个非常简单的模板引擎。

或者，如果您更有可能在服务器上支持PHP，请使用PHP生成CSS代码而不是HTML（是的，PHP可以做到这一点）。

或者，使用CSSOM来操纵CSS客户端，使用JavaScript。

如何在每次加载时加载不同的css

3 个答案: