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你应该显示console.log(document.styleSheets[0])而不是console.log(document.styleSheets). CSS

于 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>

它工作正常，我认为它与萤火虫的对象引用有关

于 2012-05-16T13:07:36.427 回答