Use JavaScript to create new style sheets and new style rules _php instances

Nowadays, popular in Web pages using a lot of JavaScript, we need to find ways to optimize them, make them faster. We use event delegates to make event listeners more efficient, use frequency reduction techniques to limit how many methods are used, use various JavaScript loaders to dynamically load the resources we need, and so on. Another way to make a page more efficient and more agile is to dynamically add or remove styles from a style sheet without having to query the DOM elements to make a style adjustment for each element. Let's take a look at how to use this technology!

Capturing style Sheets

There may be more than one style file referenced on your page, and you can choose one of them. If you specify one, you can make a difference by adding an ID to the link and Style tab in the HTML page to get the Cssstylesheet object, which is stored in the Document.stylesheets object.

var sheets = document.stylesheets; Returns a stylesheetlist array
/* Returns: 

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: item:function} */
/

Find the stylesheet you want to modify
var sheet = document.stylesheets[0];

One important thing to note is the media properties of the stylesheet--if you're not careful, you may be incorrectly modifying the style sheet used when printing (print) When you want to make a change to the style sheet used for screen display. There are various attribute information in the Cssstylesheet object that you can get from when you need it.

Get info about the the ' the ' the ' the ' Stylesheet
Console.log (Document.stylesheets[0]);
/* Return result: 

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 are used for This stylesheet
* *

There are many ways you can capture a style sheet and add new style rules to it.

Create a new style sheet

Most of the time, the best way is to create a new style element that dynamically adds rules to it. Very simple:

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

 If you want, you can add media properties (or media query) 
 //Style.setattribute (media, screen)
 //Style.setattribute (Media) , "@media only screens and (max-width:1024px)")

 //WebKit patch 
 Style.appendchild (document.createTextNode ("")); c8/>//Add The <style> element to the page
 Document.head.appendChild (style);

 return style.sheet;
}) ();

Unfortunately, the WebKit type of browser needs to make a little bit of change to get the code right, but somehow we get the sheet we want.

Add Style rule – Standard Addrule method

The Cssstylesheet object has a Addrule method that accepts 3 parameters: the selector, the CSS code for the style rule, and an integer that indicates the position of the style sheet (as opposed to the same selector):

Sheet.addrule ("#myList li", "FLOAT:LEFT; Background:red!important; ", 1);
The default position is-1, which means last. For extra control, or lazy writing, you can add!important to the rules to eliminate the problems caused by the position. Calling Addrule will return -1--it does not represent anything.

You'll find that the advantage of this technique is that it dynamically adds style rules to the page and applies them; you don't have to operate on each element, and the browser automatically applies the rules. It's efficient!

New Style rule

There is also a Insertrule method in the Cssstylesheet object, but there is no such method in earlier 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 certainly very useful.

Secure Application Style rules

Because not all browsers support Insertrule, it's a good idea to do some encapsulation to make sure the code executes effectively. The following is a very simple encapsulation 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 all kinds of situations. If you want to use the code in this method individually, it's best to wrap them up with Try{}catch (e) {}.

Add style rules for media queries (Queries)

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

Sheet.insertrule ("@media only Screens and (max-width:1140px) {header {display:none;}}");
Because old IE doesn't support insertrule, we can use another method, which is to create a style element, give it the correct media attribute, and then add a new style rule to it. This approach adds extra style elements, but it's very simple.

I think it's a very efficient and simple technique to add style rules to the style table dynamically. Remember to try this technique in your next application, 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 to help you learn, but also hope that we support the cloud habitat community.