Question

我正在尝试删除第一条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在删除前后显示相同数量的规则。

Answer 1

似乎对我来说工作得很好

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

您需要检查cssRules属性的长度。

如果您在firebug中记录实际对象，那么当您尝试深入挖掘时，它将显示样式表的当前状态，因此它将减少规则数量。（从您开始时开始挖掘删除将会发生）

但如果您在删除之前和之后记录实际的规则数，那么它将显示正确的结果..

所以问题是理解console.log命令如何工作的错误。

Answer 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

Answer 3

<!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的对象引用的东西

删除CSS规则在Firefox中不起作用

更新

3 个答案: