console messages in FF4 (and a stupid CSS question)_问答_开发者

console messages in FF4 (and a stupid CSS question)

开发者 https://www.devze.com 2023-02-22 03:57 出处：网络

ok, this code works just fine in Chrome. But, for some reason it does not in FireFox 4 nor IE. <html>

ok, this code works just fine in Chrome. But, for some reason it does not in FireFox 4 nor 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>

In FireFox 4 an IE, the line theRules[0].style["color"] = "#00BB00"; works but the next two do not. It neither changes the background color of the div nor prints out console.log messages (of any sort). Now, IE does give a message that there is no console.log开发者_运维技巧, so that makes sense. But FireFox gives no error, no warning, no messages. However, it all works perfectly in Chrome. Which gives the console message: background>rgb(187, 0, 187) as expected. The line: theRules[0].style["color"] = "#00BB00"; works in all browsers as expected.

Any ideas why? or how to fix it for FF?

I guess there is two questions here:

How to get this working in FF and
where did console.log go in FF4?

EDIT: oops, just figured it out. It needs to say "backgroundColor" instead of "background-color". But, the console.log question still remains, so I'm leaving this question up.

EDIT: Changed title to something more relevant

Pimp Trizkit

The more compatible way is to specify the property names in camel case, as you discover:
```
theRules[0].style['backgroundColor']
```
It's so that you can specify the property name in either square bracket notation (above), or dot notation (below):
```
theRules[0].style.backgroundColor
```
Firefox 4 has a Web Console that you can access in the Firefox > Web Developer menu (or Tools menu on the menu bar in Mac OS X):