Question

好的，这段代码在Chrome中运行得很好。但是，出于某种原因，它不在FireFox 4中，也不在IE中。

<html>
<head>
<style type="text/css">
.testCSS { background-color:#0000AA;color:#BB0000;}
</style>
</head>
<body>
<div id="test" class="testCSS">Test Div</div>
<script>
    var theRules = new Array();
    if (document.styleSheets[0].cssRules) {
        theRules = document.styleSheets[0].cssRules;
    } else if (document.styleSheets[0].rules) {
        theRules = document.styleSheets[0].rules;
    }
    theRules[0].style["color"] = "#00BB00";
    theRules[0].style["background-color"] = "#BB00BB";
    console.log("background>" + theRules[0].style["background-color"]);
</script>
</body>
</html>

在FireFox 4和IE中，行theRules[0].style["color"] = "#00BB00";可以正常工作，但接下来的两行不行。它既不会改变div的背景颜色，也不会打印出console.log消息（任何类型）。现在，IE确实给出了一条没有console.log的消息，这是有道理的。但FireFox没有错误，没有警告，没有消息。但是，它在Chrome中完美运行。这给出了控制台消息：background>rgb(187, 0, 187)按预期方式。行theRules[0].style["color"] = "#00BB00";可以按预期在所有浏览器中使用。

任何想法为什么？或者如何为FF修复它？

我想这里有两个问题：

如何在FF和
console.log在哪里进入FF4？

编辑：将标题更改为更相关的内容

Pimp Trizkit

Answer 1

更兼容的方法是在camel情况下指定属性名称，因为您发现：
```
theRules[0].style['backgroundColor']
```
这样您就可以用方括号表示法（上图）或点符号（下图）指定属性名称：
```
theRules[0].style.backgroundColor
```
Firefox 4有一个Web控制台，您可以在 Firefox＆gt;中访问它。 Web Developer 菜单（或Mac OS X菜单栏上的工具菜单）：

FF4中的控制台消息（以及一个愚蠢的CSS问题）

1 个答案: