Accessing Individual CSS Rules

document.styleSheets[0].rules[0].style.color =   randomColor(); document.styleSheets[0].cssRules[0].style.color =   randomColor(); 

The individual rules within a style sheet can be programmatically accessed, as well. However, here, the web browsers differ from each other. Internet Explorer supports the rules property, whereas all other browsers use the cssRules property. The one exception is the Opera browser, which supports neither of these two.

Note that you can access the rules and then, for instance, change them. Every rule behaves like a generic HTML element: You use the style property to access all styles, and then modify or add styles.

For the following example, a helper function generates a random color in RGB format:

function randomColor() {   var chars = "0123456789abcdef";   var color = "#";   for (var i=0; i<6; i++) {     var rnd = Math.floor(16 * Math.random());     color += chars.charAt(rnd);   }   return color; } 

Then, the previous phrase is extended. First of all, every style sheet contains rules for both <p> and for <span> elements. Then, both of these rules get an additional CSS command: The color is set to a random value. You may question how useful this simple example is in the real world, but the technology behind it can be adapted in a quite flexible way.

Accessing CSS Rules (rules.html)

<script language="JavaScript"   type="text/javascript"> function makeBold() {   document.styleSheets[0].disabled = false;   document.styleSheets[1].disabled = true;   if (document.styleSheets[0].rules) {     document.styleSheets[0].rules[0].style.color =       randomColor();     document.styleSheets[0].rules[1].style.color =       randomColor();   } else if (document.styleSheets[0].cssRules) {     document.styleSheets[0].cssRules[0].style.color =       randomColor();     document.styleSheets[0].cssRules[1].style.color =       randomColor();   }   window.setTimeout("makeLighter();", 1000); } function makeLighter() {   document.styleSheets[0].disabled = true;   document.styleSheets[1].disabled = false;   if (document.styleSheets[0].rules) {     document.styleSheets[1].rules[0].style.color =       randomColor();     document.styleSheets[1].rules[1].style.color =       randomColor();   } else if (document.styleSheets[0].cssRules) {     document.styleSheets[1].cssRules[0].style.color =       randomColor();     document.styleSheets[1].cssRules[1].style.color =       randomColor();   }   window.setTimeout("makeBold();", 1000); } window.onload = makeBold; </script> <style type="text/css" >   p { font-weight: bold; }   span { font-style: italic; } </style> <style type="text/css" >   p { font-weight: lighter; }   span { font-style: normal; } </style> <p>CSS <span>and</span> JavaScript</p> 

Figure 4.2 shows the result: Even though the book is in grayscale, you can see the different colors (or: shades of gray) of the paragraph and the <span> element inside it.

Figure 4.2. The text colors are applied at random to the individual CSS rules.