styleSheet and cssRule / rule Objects

IE 5+, Netscape 6+

There's something I want to make clear up front - this is a tedious subject and it only covers some of the styleSheet and cssRule objects' properties. And most of you will probably never need to use this information. Nevertheless, here it is.

Both IE and Netscape use the same syntax for stylesheets - document.styleSheet[arrayNo]. There are 2 stylesheets used in this page. The first is the external one used throughout this site, the second is an internal one that contains the styles for the table below. It is shown here:

<style>
 .myTable { border:1px dotted #000;background-color:#ffc;margin:30px;width:200px}
 td, caption {color:#666 }
 caption {font-size:12px;padding:0px  }
</style>

The styleSheets object contains the array of styleSheet objects in the document. We can use this test to see how many styleSheet objects are in the page :

In this tutorial we are going to be working with the second, internal stylesheet. In the scripts, it will be refered to by document.styleSheet[1].

Table class="myTable"

cell 1

cell 2

cssRules or rules?

Now that we have a way of refering to a specific stylesheet, we need a way access the rules it contains. It's at this point that the browsers stop agreeing.

Netscape and Mac IE stick to the W3C standard of using cssRules object. Win IE uses rules. Here's how to find out how many rules our stylesheet contains :

<script>
function rulesLen(){
 if (document.styleSheets){
  var s = document.styleSheets[1];
  if (s.cssRules){ // -- this is for N6+ and Mac IE 5
   var r = s.cssRules;
  }
  else if (s.rules){ // -- this is for Win IE
   var r = s.rules;
  }
 alert(r.length);
 }
 }
</script>

Did you get 4 as the result? Wonder what those 4 are? We can use the cssText property of the cssRule/rule object to find out..

cssText

cssText refers to the complete rule object including the selector it's style properties. In function showRules(), a loop is used to show the cssText.

<script>
function showRules(){
 if (document.styleSheets){
  var s = document.styleSheets[1];
  if (s.cssRules){ 
   var r = s.cssRules;
  }
  else if (s.rules){ 
   var r = s.rules;
  }
  for (i=0;i<r.length;i++)
   alert(r[i].cssText);
 }
 }
</script>

N7+ and Mac IE 5 only

selectorText

selectorText is a property of the cssRule/rule object and refers to the selector part of each stylesheet rule. Using a loop in function nameSelectors(), we can find all the selectors in our stylesheet.

<script>
function nameSelectors(){
 if (document.styleSheets){
  var s = document.styleSheets[1];
  if (s.cssRules){ 
   var r = s.cssRules;
  }
  else if (s.rules){ 
   var r = s.rules;
  }
  for (i=0;i<r.length;i++)
   var y = i+1;
   alert('Rule '+ y +' = ' +r[i].selectorText);
 }
 }
</script>

This does not work with Netscape 6!!

Getting a Rule's style attributes

Now that we know how to access individual rules we can use the following method to access the style attributes they contain.

Let's use function showStyles() to view the first style attribute of the first rule ( .myTable ).

<script>
function showStyle(){
 if (document.styleSheets){
  var s = document.styleSheets[1];
  if (s.cssRules){ 
   var r = s.cssRules;
  }
  else if (s.rules){ 
   var r = s.rules;
  }
  alert(r[0].style.item(0));
 }
 }
</script>

This does not work with Win IE!

Did you notice that this only returned the name of the style attribute, not the value? Here's how to read the value :

<script>
function showStyleValue(){
 if (document.styleSheets){
  var s = document.styleSheets[1];
  if (s.cssRules){  // - N6+ and Mac IE
   var r = s.cssRules;
   var styleName = r[0].style.item(0);
    alert(r[0].style.getPropertyValue(styleName));
  }
  else if (s.rules){ // - Win IE
   var r = s.rules;
   alert(r[0].style.border);
  }
 }
 }
</script>

Notice that for Win IE that you must explicitly name the style you want the value of.

Limitations

Aside from the lousy cross-browser consistency, there is no way to determine the number of style attributes contained in a rule. At least I haven't been able to figure out a way yet. If you know how to do it, please let me know.