JavaScript Dynamic Insert CSS method _javascript tips

When you write components, you sometimes want to encapsulate some of the CSS styles associated with component features in JS, which is more cohesive and convenient to change. JS Dynamic Insert CSS Two steps: Create 1, a Style object
2. Add styles using stylesheet Insertrule or Addrule methods

First, view the style sheet

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

The first three are CSS files introduced through the link tag, and the fourth is a CSS that is inline with the style tag. Has the following properties

Each cssrule has the following properties

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

Second, dynamic insert CSS
first, you need to create a style object that returns its Stylesheet object

 * * Create a style that returns its Stylesheet object
 * Note: Use Style.stylesheet in Ie6/7/8, other browsers style.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 function Addcssrule as follows

*
 * Dynamic add CSS style
 * @param selector {string} selector
 * @param rules {string} CSS style Rule
 * @param index {number} insert The rules of the position, the following rules will cover the front of the
 * *
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, while IE low version supports addrule.
The complete code is as follows

*
 * Dynamic add CSS style
 * @param selector {string} selector
 * @param rules {string} CSS style Rule
 * @param index {number} insert The rule position, the back rule will overwrite the front
/var addcssrule = function () {
 ///Create a style, return its Stylesheet object
 //Note: Use Styl in IE6/7/8 E.stylesheet, other browsers style.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 Stylesheet Object
 var sheet = createstylesheet ();
 
 Returns the interface functions 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 only the mobile side or modern browser support, you can remove the low version of IE to judge the code

*
 * Dynamic add CSS style
 * @param selector {string} selector
 * @param rules {string} CSS style Rule
 * @param index {number} insert The position of the rule, the back of the rule will overwrite the front, the default after inserting
/var addcssrule = function () {
 ///Create a style, return its Stylesheet object
 function cre Atestylesheet () {
  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 functions return function
 (selector, rules, index) {
  index = index | | 0;
  Sheet.insertrule (selector + "{" + Rules + "}", index);
 }
();

The above is the JavaScript dynamic inserts the CSS method, hoped that has the help to everybody's study.