javascript - 如何每次onload加载不同的css

Question

我正在尝试添加一些 css。但我希望它在每次页面加载时更改它(显然我会指定在不同时间加载的内容)

例如有时我想加载

<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:博客 **

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

<script type="text/javascript">

    function setCSS(selector, attribute, value) {
        var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
        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"].indexOf(selector) != -1) {
                        if(document.styleSheets[S][cssRuleCode][n].style[attribute]) {
                            document.styleSheets[S][cssRuleCode][n].style[attribute] = value;

                            break;
                        }
                    }
                }
            }

        }
    }

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

</script>