Is there a way to add and remove or disable a CSS rule in JavaScript? Here is the CSS:
#myElement *, #myElement *:before {
outline:1px dotted red;
}
Here is what I have so far:
var myCSS = "#myElement *, #myElement *:before {outline:1px dotted red;}";
// document.addCSS(myCSS);
EDIT:
I can't add the rules to the HTML page and toggle between them. I need to be able to create a rule in JavaScript after the page loads and also switch it on and off in JS.
Seems like you could find an answer here on Mozilla Developer Network:
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
Inserts a new CSS rule into the current style sheet
Example:
// create a style sheet and add rule
var borderStyleSheet = document.createElement("style");
document.head.appendChild(borderStyleSheet);
borderStyleSheet.sheet.insertRule("#myElement *{ outline: 1px solid red;}", 0);
// disable rule
borderStyleSheet.disabled = true;
// enable rule
borderStyleSheet.disabled = false;
// see existing stylesheets
console.log(document.styleSheets);
You Can add class using className property
document.getElementById("myElement").className += " MyClass";
you can add multiple class and remove class using classList
document.getElementById("myElement").classList.add('newclass');
document.getElementById("myElement").classList.remove('newclass');
The common way of doing this is to use a class to turn on/off the styles. As in:
#myElement.outline *, #myElement.outline *:before {
outline:1px dotted red;
}
Then (in this example) you add/remove the outline class as needed via javascript.
You can do so as follows:
var sheet = document.styleSheets[0];
sheet.insertRule(".foo { color:pink; }", sheet.cssRules.length);
Except on internet explorer <= 8, where you must write
sheet.addRule(".foo", "color: pink;", -1);
