1

最初の CSS ルールを削除しようとしています。

ただし、これは Firefox 3.6.28 では機能しません。これは誰にとっても同じですか、なぜそうなのですか?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script type="text/javascript">

            $(window).load(function(){

                console.log(document.styleSheets);
                document.styleSheets[0].deleteRule(0);
                console.log(document.styleSheets); // same as the first console.log

            });

        </script>
        <style>
            body{font-size:62.5%;}
            #mc{padding:310px 0 10px 162px; color:#fff;}
            #content{width:500px;}
            #header{padding-top:10px;}
            #banner{padding:10px 0}
        </style>
    </head>
    <body>
        Test JS
    </body>
</html>

アップデート

明確にするために、削除は機能しているように見えますがconsole.log、削除の前後で同じ数のルールが表示されます。

4

3 に答える 3

3

私にとってはうまくいくようです

http://jsfiddle.net/gaby/JmWwM/の例

プロパティの長さを確認する必要がありcssRulesます。

実際のオブジェクトをfirebugに記録すると、さらに深く掘り下げようとすると、スタイルシートの現在の状態が表示されるため、ルールの数が減ります。（掘り始めた時点で削除が行われているため） ）。

ただし、削除の前後の実際のルール数をログに記録すると、正しい結果が表示されます。

したがって、問題はconsole.logコマンドがどのように機能するかを理解する上での間違いです。

于 2012-05-16T13:05:14.493 に答える
2

https://developer.mozilla.org/en/DOM/CSSStyleSheet/deleteRule によるとstylesheet.deleteRule(index)、削除ルールはインデックスを受け入れるため1、0.

jsfiddle http://jsfiddle.net/N3zsw/を作成しました。ページに他のスタイルシートがあるため、コードにいくつかの変更を加える必要があったため、0 == 3.

それは私のために働くようです。あなたがそうするとき、あなたは代わりにconsole.log表示されるべきです。CSSconsole.log(document.styleSheets[0])console.log(document.styleSheets)

于 2012-05-16T12:57:22.023 に答える
0 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
        <style>
            body{font-size:62.5%;}
            #mc{padding:310px 0 10px 162px; color:#fff;}
            #content{width:500px;}
            #header{padding-top:10px;}
            #banner{padding:10px 0}
        </style>
        <script type="text/javascript">
            (function () {
                var s = document.styleSheets[0];
                console.log(s.cssRules.length);
                s.deleteRule(1);
                console.log(s.cssRules.length);
                s.deleteRule(1);
                console.log(s.cssRules.length);
                s.deleteRule(1);
                console.log(s.cssRules.length);
                s.deleteRule(1);
                console.log(s.cssRules.length);
            })();
        </script>
    </head>
    <body>
        Test JS
    </body>
</html>

それはうまく機能しています、私はそれがfirebugのオブジェクト参照のものだと思います

于 2012-05-16T13:07:36.427 に答える