JavaScript dynamically inserting CSS

When you write components, you sometimes want to encapsulate some of the CSS styles associated with component features in JS, so it's more cohesive and easy to change. JS Dynamic Insert CSS Two steps can be

1 Creating a Style object
2 Add a style using Stylesheet's Insertrule or AddRule method

First, view the style sheet

First look at the document.stylesheets, open a page at will

The first three are the CSS files introduced through the link tag, and the fourth one is the CSS that is inline in the page via the Style tab. Has the following properties

Each of the Cssrule has the following properties

One of the Csstext is written in the style of the source code.

Ii. Dynamic insertion of CSS

First, you need to create a style object that returns its Stylesheet object

/* Create a style to return its Stylesheet object * Note: IE6/7/8 uses style.stylesheet, other browsers style.sheet */function createStyleSheet () {var h EAD = Document.head | | document.getElementsByTagName (' head ') [0];var style = document.createelement (' style '); style.type = ' text/css '; Head.appendchild (style); return Style.sheet | | Style.stylesheet;}

Add the function Addcssrule as follows

/* Dynamically add CSS style * @param selector {string} selector * @param rules    {string} CSS style Rule * @param index    {number} The location of the insert rule, by After the rules will be covered by the former */function addcssrule (selector, rules, index) {    index = index | | 0;    if (sheet.insertrule) {          sheet.insertrule (selector + "{" + Rules + "}", index);      } else if (sheet.addrule) {          sheet.addrule (selector, rules, Index);}      }

It is important to note that the standard browser supports Insertrule, while the low version of IE supports addRule.

The complete code is as follows

/* Dynamically add CSS style * @param selector {string} selector * @param rules    {string} CSS style Rule * @param index    {number} The location of the insert rule, by The following rule overrides the previous */var addcssrule = function () {//creates a style that returns its Stylesheet object//Note: Style.stylesheet is used in IE6/7/8, other browsers style.sh Eetfunction createStyleSheet () {var head = Document.head | | document.getelementsbytagname (' head ') [0];var style = Document.createelement (' style '); style.type = ' text/css '; head.appendchild (style); return Style.sheet | | Style.stylesheet;} Create stylesheet object var sheet = createStyleSheet ();//Returns the interface function return functions (selector, rules, index) {index = index | | 0;
   if (sheet.insertrule) {          sheet.insertrule (selector + "{" + Rules + "}", index);      } else if (sheet.addrule) {          sheet.addrule (selector, rules, Index);}}}      ();

If you only support mobile or modern browser, you can get rid of the low version IE judgment code

/* Dynamically add CSS style * @param selector {string} selector * @param rules    {string} CSS style Rule * @param index    {number} The location of the insert rule, by After the rule will overwrite the front, by default insert */var Addcssrule = function () {    //Create a style, return its Stylesheet object    function createStyleSheet () { C4/>var style = document.createelement (' style ');        Style.type = ' text/css ';        Document.head.appendChild (style);        return style.sheet;    }     Create Stylesheet Object    var sheet = createstylesheet ();     Returns the interface function return functions    (selector, rules, index) {        index = index | | 0;        Sheet.insertrule (selector + "{" + "Rules +"} ", index);}    } ();

　　

Online demo:http://snandy.github.io/lib/func/addcssrule.html

Related:

Https://developer.mozilla.org/en-US/docs/Web/API/StyleSheet

Https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

JavaScript dynamically inserting CSS