console messages in FF4 (and a stupid CSS question)
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):
精彩评论