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