JavaScript _ javascript tips

This article mainly introduces how to insert CSS dynamically in JavaScript. when JavaScript is inserted dynamically in two steps, sometimes we want to encapsulate CSS styles related to some component features in JS, this is more cohesive and convenient to change. JS dynamic insert CSS two steps: create 1. a style object
2. use the insertRule or addRule method of stylesheet to add a style.

1. view the style sheet

Take a look at document. styleSheets and open a page at will.

The first three are CSS files imported through the link tag, and the fourth is CSS files inline in the page through the style tag. Has the following attributes:

Each cssRule has the following attributes:

CssText is the source code written in style.

II. insert CSS dynamically
First, create a style object and return its stylesheet object.

/** Create a style and return its stylesheet object * Note: style is used in IE6/7/8. stylesheet, style in other browsers. sheet */function 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 ;}

Add the addCssRule function as follows:

/** Dynamically add CSS styles * @ param selector {string} selector * @ param rules {string} CSS style rule * @ param index {number} insert the location of the rule, the backward rule will overwrite the previous */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 );}}

Note that standard browsers support insertRule and earlier IE versions support addRule.
The complete code is as follows:

/** Dynamically add CSS styles * @ param selector {string} selector * @ param rules {string} CSS style rule * @ param index {number} insert the location of the rule, the backward rule overwrites the previous */var addCssRule = function () {// creates a style and returns its stylesheet object. // Note: style is used in IE6/7/8. stylesheet, style in other browsers. sheet function 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 the stylesheet object var sheet = createStyleSheet (); // return interface function return function (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 terminals or modern browsers, you can remove the code judged by earlier IE versions.

/** Dynamically add CSS styles * @ param selector {string} selector * @ param rules {string} CSS style rule * @ param index {number} insert the location of the rule, the backward rule will overwrite the previous one. by default, */var addCssRule = function () {// creates a style and returns its stylesheet object function createStyleSheet () {var style = document. createElement ('style'); style. type = 'text/css '; document. head. appendChild (style); return style. sheet;} // create the stylesheet object var sheet = createStyleSheet (); // return the interface function return function (selector, rules, index) {index = index | 0; sheet. insertRule (selector + "{" + rules + "}", index );}}();

The above is the method for dynamically inserting CSS in JavaScript. I hope it will be helpful for your learning.