开发者

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:

  1. How to get this working in FF and
  2. 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


  1. 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
    
  2. 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):

    console messages in FF4 (and a stupid CSS question)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜