Create new style sheets and new style rules using JavaScript, javascript style sheets

Use JavaScript to create new style sheets and new style rules, javascript style sheets

In today's era, it is popular to use a lot of JavaScript on Web pages, and we need to find various ways to optimize them and make them faster. We use event delegation to make event listeners more efficient, use frequency reduction technology to limit the number of times certain methods are used, use various JavaScript loaders to dynamically load the resources we need, and so on. Another way to make the page more efficient and agile is to dynamically add or remove styles in the style sheet without having to query the DOM elements and make style adjustments to each element. Let’s take a look at how to use this technique!

Capture stylesheet

Your page may reference more than one style file, you can choose one of them. If you specify one, you can add ID to the LINK and STYLE tags in the HTML page to distinguish it, and obtain the CSSStyleSheet object, which is stored in the document.styleSheets object.

var sheets = document.styleSheets; // 返回一个StyleSheetList数组

/*
返回： 

StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
*/

// 找到你想要修改的样式表
var sheet = document.styleSheets[0];

An important thing to note is the media attribute of the style sheet - if you are not careful, when you want to modify the style sheet used for screen display, you may mistakenly modify it for printing (print ). There are various attribute information in the CSSStyleSheet object, which you can get from when needed.

// Get info about the first stylesheet
console.log(document.styleSheets[0]);

/*
返回结果： 

CSSStyleSheet
 cssRules: CSSRuleList
 disabled: false
 href: "http://davidwalsh.name/somesheet.css"
 media: MediaList
 ownerNode: link
 ownerRule: null
 parentStyleSheet: null
 rules: CSSRuleList
 title: null
 type: "text/css"
*/

// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
 "all" or "print" or whichever media is used for this stylesheet
*/

There are many ways to capture a stylesheet and add new style rules to it.

Create a new style sheet

Most of the time, the best approach is to create a new STYLE element and add rules to it dynamically. Very simple:

var sheet = (function() {
 // Create the <style> tag
 var style = document.createElement("style");

 // 如果你愿意的话，可以添加media属性 (或 media query) 
 // style.setAttribute("media", "screen")
 // style.setAttribute("media", "@media only screen and (max-width : 1024px)")

 // WebKit 补丁 
 style.appendChild(document.createTextNode(""));

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

 return style.sheet;
})();

Unfortunately, WebKit-type browsers need to make some minor modifications to make the above code run correctly, but no matter what, we get the sheet we want.

Add style rules – standard addRule method

There is an addRule method in the CSSStyleSheet object, which can accept 3 parameters: the selector, the CSS code of the style rule, and an integer. This integer is used to indicate the position of the style sheet (relative to the same selector):

sheet.addRule("#myList li", "float: left; background: red !important;", 1);
The default value of position is -1, which means it is placed at the end. For extra control, or for lazy writing, you can add !important to the rules to eliminate positional issues. Calling addRule returns -1 - it means nothing.

You will find that the advantage of this technology is that it can dynamically add style rules to the page and apply them; you do not have to operate on each element, the browser will automatically apply these rules. Be efficient!

New style rule

There is also an insertRule method in the CSSStyleSheet object, but this method was not available in early IE. The insertRule method mixes the first two parameters of the addRule method together:

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
This method looks ugly, but it is undoubtedly very useful.

Safely apply style rules

Because not all browsers support insertRule, it is best for us to make some encapsulation to ensure the effective execution of the code. Here is a very simple packaging method:

function addCSSRule(sheet, selector, rules, index) {
 if(sheet.insertRule) {
 sheet.insertRule(selector + "{" + rules + "}", index);
 }
 else {
 sheet.addRule(selector, rules, index);
 }
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

This method can deal with various situations. If you want to use the code in this method separately, it is best to wrap them with try{}catch(e){}.

Add style rules for media queries

There are two ways to add style rules for specific media queries. The first is through the standard insertRule method:

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
Because the old IE does not support insertRule, we can use another method, which is to create a STYLE element, give it the correct media attribute, and then add new style rules to it. This method will add additional STYLE elements, but it is very simple.

I think dynamically adding style rules to a style sheet is a very efficient and simple technique. Remember to try this technique in your next app, it will save you a lot of effort.

(English: Add Rules to Stylesheets with JavaScript.)

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Bangke Home.