NN 6, IE 4
You want to swap style sheets for an element based on user action, such as rolling the mouse over a hot spot or clicking on an arbitrary element.
First, define two style sheet rules, each with a different class selector. Then design an event handler for the element to change the element's className property to the desired class selector's identifier:
Adjusting the className property of an element as shown here is a more stable approach for early versions of Netscape 6 instead of manipulating styleSheet objects and their properties. It is perhaps the most widely used and supported way to implement dynamic styles.
If you are toggling the style for just a single element, you might be tempted to use the id attribute and ID selector as your switch point, rather than the class attribute and selector. But an element's id attribute should not change unless absolutely necessary.
When a script reassigns a style sheet rule to an element, none of the CSS properties from the previous setting are inherited by the newly assigned rule. In the preceding example, the rule with the hilited class selector sets the text-decoration property to underline the element's text. But when the unhilited rule is reapplied to the element, the element automatically reverts to the previous value of the text-decoration property that the element inherited from the browser's default style sheet.
Recipe 11.7 for enabling or disabling a style sheet.