Insert a new style implementation method into the current style sheet_javascript skills

It is rare to insert a new style rule. Today, in order to temporarily solve the page style problem, some styles of many pages need to be updated. These pages all reference a public js. For convenience, directly insert into the style sheet in this public js. New style rules.

Look at the code first:

Copy the code The code is as follows:

/* *
* Add a stylesheet rule to the document (may be better practice, however,
* to dynamically change classes, so style information can be kept in
* genuine styesheets (and avoid adding extra elements to the DOM))
* Note that an array is needed for declarations and rules since ECMAScript does
* not afford a predictable object iteration order and since CSS is
* order-dependent (i.e., it is cascading); those without need of
* cascading rules could build a more accessor-friendly object-based API.
* @param {Array} decls Accepts an array of JSON-encoded declarations
* @example
addStylesheetRules([
['h2', // Also accepts a second argument as an array of arrays instead
['color', 'red'],
['background-color', 'green', true] // 'true' for !important rules
],
['.myClass',
['background-color', 'yellow']
]
]);
*/
function addStylesheetRules (decls) {
var style = document.createElement('style');
document.getElementsByTagName('head')[0].appendChild(style);
if (!window.createPopup) { /* For Safari */
style.appendChild(document.createTextNode(''));
}
var s = document.styleSheets[document.styleSheets .length - 1];
for (var i=0, dl = decls.length; i < dl; i ) {
var j = 1, decl = decls[i], selector = decl[0 ], rulesStr = '';
if (Object.prototype.toString.call(decl[1][0]) === '[object Array]') {
decl = decl[1];
j = 0;
}
for (var rl=decl.length; j < rl; j ) {
var rule = decl[j];
rulesStr = rule[0] ':' rule[1] (rule[2] ? ' !important' : '') ';n';
}
if (s.insertRule) {
s.insertRule(selector '{ ' rulesStr '}', s.cssRules.length);
}
else { /* IE */
s.addRule(selector, rulesStr, -1);
}
}
}

Copy code The code is as follows:

addStylesheetRules( ["div.content", ["color": "#000"], ["border-width","1px"], ["border-style", "solid"]])

After execution, there is an additional style

Copy code The code is as follows:

You know how to call it? It will happen every time you call it. Insert a new style, so it is best to call it once and insert multiple rules

Copy code The code is as follows:

addStylesheetRules(
[selector, [attr, value], …],
[selector, [attr, value], …]
);

Mainly use two methods :
Standard method: stylesheet.insertRule(rule, index)
rule: inserted rule, such as div.content{color:#000}
index : Insertion order, the order will affect the style. Starting from 0
firefox, chrome, opera, safri, and ie also support this method starting from ie9
ie's stylesheet.addRule (selector, styleDef [, positionIndex]);
selector: such as div.content
styleDef: such as color:#000
positionIndex: default -1, inserted at the end
ie, safari, and chrome support this method