11.7 Enabling/Disabling Style Sheets

NN 6, IE 4

11.7.1 Problem

You want to activate or deactivate a style sheet in the page to change between style sheets dynamically.

11.7.2 Solution

To turn off a style sheet, assign the Boolean value true to a styleSheet object's disabled property:

document.styleSheets[1].disabled = true;

Conversely, to re-enable the style sheet, set its disabled property to false:

document.styleSheets[1].disabled = false;

Even some recent browser versions do not respond reliably to these statements. Occasionally you can disable and enable a link element object that has loaded a style sheet. A style element object has a disabled property supported by IE 4 and later as well as NN 6 and later.

11.7.3 Discussion

Enabling and disabling style sheets could be another way to implement a selectable "skin" interface for a page. The page could contain multiple <style> tags, each containing detailed specifications for a skin design. Radio button controls or clickable icons could disable all and enable one, along the lines demonstrated in Recipe 12.4.

11.7.4 See Also

Recipe 11.6 for loading a different external style sheet on the fly; Recipe 11.8 for switching between loaded style sheets; Recipe 12.4 for using cookies to preserve external style sheet choices between visits.