Modifying the style of an individual element is very precise, but sometimes you may want to have a more global effect: perhaps you'd like to modify a style defined by a style sheet as a class or global style. Such a modification would have a ripple-effect, immediately re-rendering all elements on the page which are subject to that style sheet.

Below is a style sheet definition which specifies two styles: a global style which applies to all <H3> element (blue, arial font family, large size), and a generic style class named warning (red, bold, italic)which will apply to any element which uses that class.

<STYLE ID="sheet1">
H3 { color:blue; font-family:"Arial"; font-size:large; }
.warning { color:red; font-weight:bold; font-style:italic; }
</STYLE>

Your goal, once the document has been rendered according to the above style sheet, is to modify this style sheet via JavaScript such that any changes are dynamically reflected on-screen. To do this, you'll need to learn some new terminology. Each "style definition" in the style sheet is known as a "rule". Thus, the line defining the style for H3 is one rule, while the line which defines the warning class is a second rule.

In Microsoft's Document Object Model, you access a style sheet through the styleSheets[] array (aka "collection"). A single style sheet is defined as everything between a set of <STYLE>...</STYLE> tags. The above example, then, is one style sheet. If it were the first instance of such tags in your source code then it would be the first style sheet, as well. You access the first style sheet via JavaScript using the reference:

document.styleSheets[0]

Within each styleSheet object is a rules collection. This array contains an entry for each rule within the style sheet. Therefore, you would access the first rule -- the H3 rule -- of this style sheet as:

document.styleSheets[0].rules[0]

And the second rule -- the warning class -- as:

document.styleSheets[0].rules[1]

Now, before this grows ever more baffling, let me add that each rule object possesses a style object. And it is through that style object which you can modify the rule. What?? Example: You want to change the H3 rule in this example so that its color becomes yellow:

document.styleSheets[0].rules[0].style.color="yellow";

Now you want to change this rule's font family to courier:

document.styleSheets[0].rules[0].style.fontFamily="courier";

You can modify any style property for the rule, even one which wasn't specified in the original style sheet. Thus, if you'd suddenly like to make all H3 text on the page italic:

document.styleSheets[0].rules[0].style.fontStyle="italic";

Any of the above JavaScript statements will apply the changes to all <H3> elements on the page. Similarly, making any changes to the style object for the warning class rule (document.styleSheets[0].rules[1].style.property) will apply all changes to any tags which specify the attribute STYLE="warning"; e.g. <P STYLE="warning">.

Clearly, dynamic styles are extremely powerful, allowing you to alter the look of a page in seconds. A particularly interesting style property you should investigate is display. This property allows you to set whether a style is rendered at all or not. An un-rendered style will not take up any screen space, but if you later change the display property from "none" to "block", any element with that style will suddenly appear. The rest of the page is automatically re-rendered to accomodate the new content. This differs from an invisible block precisely because the entire page expands and contracts to accomodate the presence or absence of the content contained with the style.