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 # # # # #