1

私はいくつかの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では機能しません。

4

3 に答える 3

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

参照: JavaScript で CSS 値を変更する

アップデート

の背景色bodyを青に設定するには、次を使用します

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

**更新 2 : ブロガー **

</head>Blogger の場合は、Blogger テンプレート 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;
于 2012-12-30T09:25:40.867 に答える
1

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;

実施例

于 2012-12-30T09:26:33.753 に答える
0

テンプレート エンジンを使用して CSS を動的に生成できます。

たとえば、プレーンな CSS の代わりに、非常にシンプルなテンプレート エンジンであるVelocityを使用します。

または、サーバーで PHP をサポートする可能性が高い場合は、PHP を使用して、HTML ではなく CSS コードを生成します (そうです、PHP はそれを行うことができます)。

または、CSSOMを使用して、JavaScript を使用して CSS クライアント側を操作します。

于 2012-12-30T09:26:40.410 に答える