Two Methods of Generating css Code Dynamically by javascript

Two Methods of Generating css Code Dynamically by javascript

Sometimes we need to use js to dynamically generate css code in style tag on the page. The method is very direct, that is, directly create an style element, then set css code in style element, and finally insert it into head element. But there are some compatibility issues we need to solve. First of all, in the browser conforming to w3c standard, we only need to insert the css code as a text node into the style element, while in IE, we need to use styleSheet. cssText of style element to solve the problem. It should also be noted that in some versions of IE, the number of style tags on one page is limited. If it exceeds, an error will be reported, which needs to be considered.

Method 1:

To < style id="css" > Tag, add 1 id name in < script > Write in the label

var oCss=document.getElementById("css");

oCss.innerHTML+="#box{width:200px;}";

So you can add styles.

Method 2:

Sometimes we need to use js to dynamically generate css code in style tag on the page. The method is very direct, that is, directly create an style element, then set css code in style element, and finally insert it into head element. But there are some compatibility issues we need to solve. First of all, in the browser conforming to w3c standard, we only need to insert the css code to be inserted into the style element as a text node, while in IE, we need to use styleSheet. cssText of style element to solve the problem. It should also be noted that in some versions of IE, the number of style tags on one page is limited. If it exceeds, an error will be reported, which needs to be considered.

Let's put the code directly below and see the comments.

function addCSS(cssText){
  var style = document.createElement('style'), // Create 1 A style Element 
    head = document.head || document.getElementsByTagName('head')[0]; // Get head Element 
  style.type = 'text/css'; // You must display the settings here style Element's type Property is text/css Otherwise, in the ie It doesn't work in 
  if(style.styleSheet){ //IE
    var func = function(){
      try{ // Prevent IE Medium stylesheet Error due to quantity exceeding limit 
        style.styleSheet.cssText = cssText;
      }catch(e){

      }
    }
    // If the current styleSheet If it can't be used yet, put it in asynchronous line 
    if(style.styleSheet.disabled){
      setTimeout(func,10);
    }else{
      func();
    }
  }else{ //w3c
    //w3c Just create a text node in the browser and insert it into the style Element will do 
    var textNode = document.createTextNode(cssText);
    style.appendChild(textNode);
  }
  head.appendChild(style); // Put the created style Element is inserted into the head Medium   
}

// Use 
addCSS('#demo{ height: 30px; background:#f00;}');

Of course, this is only the most basic demonstration method, which needs to be improved in practical application. For example, every generated css code is inserted into an style element, so that the error that the number of stylesheet exceeds the limit will not occur in IE.

Summary: The above methods can solve many problems. Please find me if you don't understand anything!

Thank you for reading, hope to help everyone, thank you for your support to this site!