Enabling and Disabling Style Sheets

Sometimes you will want to turn a style sheet on or off. For example you may be want to change the skin/ theme for a website. Enabling/ Disabling Style Sheets is straight forward.

Every style sheet is embedded in a <style> element or included by a <link> element has a disabled member (which comes from the CSSStyleSheet interface). We can disable a style sheet by setting its disabled member to true.

Lets see the below function which enables/ disables a style sheet. When disabled member true means the style sheet is off, and false means that the style sheet is on.

Example
snippet
function toggleSheet(element) {
    var sheet = element.sheet || element.styleSheet;
    sheet.disabled = !sheet.disabled;
}

Calling the toggleSheet(element) method.

toggleSheet(document.getElementById("spriteStyles"));

When disabled is true the markup is totally unstyled now. Click Run again to have css.

Related Tutorial
Follow Us
https://www.facebook.com/Rookie-Nerd-638990322793530 https://twitter.com/RookieNerdTutor https://plus.google.com/b/117136517396468545840 #
Contents +