Home/ Questions/Q 4243602
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T03:35:58+00:00

ok, this code works just fine in Chrome. But, for some reason it does

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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):

    • 0