Use JavaScript to create a new style sheet and a new style rule. javascript Style sheet _ PHP Tutorial

Use JavaScript to create a new style sheet and a new style rule, javascript style sheet. Using JavaScript to create new style sheets and new style rules, javascript Style sheets are currently using a large number of JavaScript on web pages, we need to find various ways to use JavaScript to create new style sheets and new style rules, javascript Style Sheets

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

Capture style sheets

You may reference more than one style file on your page. you can select one of them. If you specify an object, you can add an ID to the LINK and STYLE labels on 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: external, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: external, 6: week, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: Week, 11: week, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function} * // find the style table var sheet = document you want to modify. styleSheets [0];

One important thing to note is the media attribute of the style sheet-if you are not careful, when you want to display the style sheet used on the screen for modification, you may mistakenly modify the style sheet used for print. The CSSStyleSheet object contains various attribute information, which you can obtain if needed.

// Get info about the first stylesheetconsole. log (document. styleSheets [0]);/* returned result: CSSStyleSheet cssRules: CSSRuleList disabled: false href: "http://davidwalsh.name/somesheet.css? 1.1.9 "media: MediaList ownerNode: link ownerRule: null parentStyleSheet: null rules: CSSRuleList title: null type:" text/css "* // Get the media typeconsole. 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 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 and dynamically add rules to it. Very simple:

Var sheet = (function () {// Create