Home>

When writing components, sometimes I want to encapsulate some CSS-related styles of component characteristics in js, so that it is more cohesive,Easy to change.js dynamically insert css in two steps:createA style object

2.Use stylesheet's insertrule or addrule methods to add styles

First, view the style sheet

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

The first three are css files introduced through the link tag, and the fourth is css inlined in the page through the style tag. Has the following properties

Each cssrule has the following attributes

The csstext is the source code written in style.

Second, insert css dynamicallyFirst, you need to create a style object and return its stylesheet object

/*
 * Create a style and return its stylesheet object
 * Note:use style.stylesheet in ie6/7/8, style.sheet in other browsers
 * /
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 function addcssrule as follows

/*
 * Add css style dynamically
 * @param selector {string} selector
 * @param rules {string} css style rules
 * @param index {number} where to insert the rule, Later rules will cover earlier ones
 * /
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);
 }
}

requires attention,Standard browsers support insertrule, ie lower versions support addrule.

The complete code is as follows

/*
 * Add css style dynamically
 * @param selector {string} selector
 * @param rules {string} css style rules
 * @param index {number} where to insert the rule, Later rules will cover earlier ones
 * /
var addcssrule=function () {
 //create a style and return its stylesheet object
 //Note:use style.stylesheet in ie6/7/8, other browser 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 ();
 //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 only mobile or modern browsers are supported,Can remove the code judged by the lower version ie

/*
 * Add css style dynamically
 * @param selector {string} selector
 * @param rules {string} css style rules
 * @param index {number} where to insert the rule, The later rules will cover the earlier ones,Insert behind by default
 * /
var addcssrule=function () {
 //create a style and return its stylesheet object
 function createstylesheet () {
  var style=document.createelement ("style");
  style.type="text/css";
  document.head.appendchild (style);
  return style.sheet;
 }
 //create stylesheet object
 var sheet=createstylesheet ();
 //return interface function
 return function (selector, rules, index) {
  index=index || 0;
  sheet.insertrule (selector + "{" + rules + "}", index);
 }
} ();
  • Previous JS submission form example analysis
  • Next PHP package connection Mysql class and usage analysis