JavaScript implements dynamically created CSS style rule scheme

There are a lot of JavaScript codes in web applications now, and we are always looking for various solutions to make them faster.

1. We use event delegation to make event monitoring more efficient, 2. We use function debouncing technology to limit the number of times a given method is called within a period of time. Please refer to: How to prevent high-frequency triggering of event functions (Chinese translation) 3. We use JavaScript loader to load the resources we really need, etc.

There is another way to make our pages faster and more efficient. That is to dynamically add and delete certain styles in the style sheet directly through JS, instead of constantly querying DOM elements and applying various style. Here's how it works.

Get style sheet

You can choose any style sheet to add style rules. If you have a certain style sheet, you can add the ID attribute to the or tag in the HTML page, and then obtain the CSSStyleSheet object directly through the sheet attribute of the DOM element. Style sheets can also be traversed through document.styleSheets:

Copy code The code is as follows: // Return an array-like style list StyleSheetList var sheets = document.styleSheets; /* The return value is similar to the following:

StyleSheetList { 0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, length: 5, Item: function } */

// Get the first sheet, regardless of the media attribute var sheet = document.styleSheets[0];

What needs special attention is the media attribute of the style sheet - when you want to display it on the screen, you certainly cannot add CSS rules to the print style sheet. You can take a closer look at the property information of the CSSStyleSheet object:

Copy code The code is as follows: //The console outputs the information of the first style sheet console.log(document.styleSheets[0]); /* Return value:

CSSStyleSheet cssRules: CSSRuleList[Object] Disabled: false href: " http://davidwalsh.name/somesheet.css " Media: MediaList[object] ownerNode: link[object] ownerRule: null parentStyleSheet: null Rules: CSSRuleList[Object] Title: null Type: "text/css" */

// Get media type (media type) console.log(document.styleSheets[0].media.mediaText) /* The return value may be: "all" or "print" or other media applied to this style sheet */

In each case, you will definitely have a way to get the stylesheet to which you want to add the rules.

Create a new style sheet

In many cases, the best approach may be to create a new element to hold these dynamic rules. This is also very simple:

Copy code The code is as follows: var sheet = (function() { // Create tag var style = document.createElement("style"); // You can add a media (/media query, media query) attribute // style.setAttribute("media", "screen") // style.setAttribute("media", "only screen and (max-width : 1024px)")

// WebKit hack :( Style.appendChild(document.createTextNode(""));

// Add the element to the page document.head.appendChild(style);

return style.sheet; })();

The tragedy is that WebKit requires a bit of hacking to create correctly, but we only need to care about this sheet.

Insert rules

The insertRule method of Stylesheets was not available in earlier versions of IE, although this is now the standard for rule injection. The insertRule method requires writing the entire CSS rule, which is the same as in the style sheet:

Copy code The code is as follows: sheet.insertRule("header { float: left; opacity: 0.8; }", 1); Although this JavaScript API method looks a bit crude, it does work like this. The second parameter index represents the position (index) where the rule is to be inserted. This is also very useful so that you can insert the same rule/code, which will make subsequent rules take effect. The default index is -1, which represents the end of the entire collection. If you want to have additional/lazy control rules, you can also add the !important tag after a rule to avoid indexing issues.

Add rules - non-standard addRule method

The CSSStyleSheet object has an addRule method that allows you to register CSS rules into the style sheet. The addRule method accepts three parameters: the first parameter is the selector, the second parameter is the CSS rule code, and the third is an integer index starting from 0, indicating the position of the style (in the same selector ):

Copy code The code is as follows: sheet.addRule("#myList li", "float: left; background: red !important;", 1); The return value of the addRule method is always -1, so this value has no practical meaning. Remember, the advantage of this approach is that elements added from the page automatically have the styles applied to them, which means you don't have to add them to specific elements, but inject them directly into the page. Of course it’s more efficient!

Safe application rules

Because not all browsers support the insertRule method, it is best to create a wrapper function to handle rule application. Here’s a quick hack:

Copy code The code is as follows: function addCSSRule(sheet, selector, rules, index) { If("insertRule" in sheet) { sheet.insertRule(selector "{" rules "}", index); } else if("addRule" in sheet) { sheet.addRule(selector, rules, index); } } //How to use addCSSRule(document.styleSheets[0], "header", "float: left");

This tool method should cover all situations where new style rules are added. If you are concerned about errors in your application, you should wrap the method's code in a try{} catch(e){} block.

Insert media query rules

There are two ways to add media query rules. The first is to use the standard insertRule method:

Copy code The code is as follows: sheet.insertRule( "@media only screen and (max-width : 1140px) { header { display: none; } }" ); Of course, because older versions of IE do not support insertRule, another method is to create a STYLE element, specify the appropriate media attribute, and then add the style to the new style sheet. This may require the use of multiple STYLE elements, but is easy. I might create an object, specify media queries and indexes, and create/get them that way.

Dynamicly adding rules to a style sheet is an efficient method and may be simpler than you think. Keep this approach in mind for your next big app, as it will prevent you from falling into pitfalls both in terms of code and element handling.

JavaScript implements dynamically created CSS style rule scheme_javascript skills