Script working in IE, but not in Chrome

Question

I have this code working perfectelly on IE. It shows the number of stylesheets associated with an HTML document, as well the number of CSS rules in each stylesheet, and also the background-color of each rule (or white, if none defined).

However, it is not working in chrome in the right way!!! Why ??

Anyone have a solution ? I really thank the help.

The HTML file

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link href="CSS/estilos.css" rel="stylesheet" type="text/css">

<style type="text/css">
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #EEE;
}

</style>
<script>

function show_styles() {

      var theSheets =[]
      theSheets = document.styleSheets;
      alert("Number of stylesheets: " + theSheets.length);

      for (var k=theSheets.length-1; k>=0; k--){
          var aSheet = theSheets[k];

          var theRules =  aSheet.cssRules; 
          if (!theRules)
         theRules = aSheet.rules;

          var totalRulesInStylesheet = theRules.length;
          alert("Index of stylesheet: " + k + ":: Number of rules on this stylesheet: " + theRules.length);

          for (var i = 0; i <totalRulesInStylesheet; i++) {
         var  fundo ="rgb(255,255,255)";

         alert("Rule number: " + i);

         var aRule =  theRules[i];

         if (aRule.style.backgroundColor !='')
            fundo = aRule.style.backgroundColor;

            var fundo2 = fundo.replace(/[^\d,]/g, '').split(',');    // (r, g, b) ->> [r g b]

            alert("Background-color of the style  >" +  aRule.selectorText +  ": " + fundo2);

       } // total rules
    } // total stylesheets

} 


</script>

</head>

<body>
<script language="javascript">
show_styles();
</script>
</body>
</html>

The CSS file (estilos.css):

.gerberas {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 18px;
    background-color: #F0861C;
}
.tulipas {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 18px;
    background-color: #A4BF33;
}

.camelias {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 18px;
}
.rosas {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: small;
    line-height: 18px;
    background-color: #F318BD;
}

What does "not working [...] the right way" mean? What specifically goes wrong and how? — ajp15243, Feb 11 '14 at 21:55
Use Chrome's Dev Tools. It will display the error in the console if any. Or set breakpoints if there's an error in your logic. https://developers.google.com/chrome-developer-tools/ — J.P. Armstrong, Feb 11 '14 at 21:56
Does `alert('test');` within this function work? It's possible you have hidden alerts. — elixenide, Feb 11 '14 at 21:56
possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Feb 11 '14 at 22:31

Script working in IE, but not in Chrome

0 Answers0