Insert a new style Implementation Method to the current style sheet

A new style rule is rarely inserted. To solve the page style problem temporarily today, we need to update some styles of many pages. These pages all reference a public js. For convenience, insert a new style rule to the style sheet directly in this public js file.

First look at the Code:
Copy codeThe 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
* Cascading rules cocould 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'! 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.css Rules. length );
}
Else {/* IE */
S. addRule (selector, rulesStr,-1 );
}
}
}

Copy codeThe Code is as follows:
AddStylesheetRules (["div. content ", [" color ":" #000 "], [" border-width "," 1px "], [" border-style "," solid "])

After execution, a style is added to the head label of the current document.
Copy codeThe Code is as follows:
<Style>
Div. content {color: #000; border: 1px solid}
</Style

You know how to call it. Each call inserts a new style, so you 'd better call it once and insert multiple rule
Copy codeThe Code is as follows:
AddStylesheetRules (
[Selector, [attr, value],…],
[Selector, [attr, value],…]
);

Two methods are used.:
Standard Method: stylesheet. insertRule (rule, index)
Rule: The inserted rule, such as div. content {color: #000}
Index: insert order, which affects the style. Starting from 0
Firefox, chrome, opera, safri, and ie support this method from ie9.
Stylesheet. addRule (selector, styleDef [, positionIndex]) of ie;
Selector: for example, div. content
StyleDef: such as color: #000
PositionIndex: default-1, insert to the end
Ie, safari, and chrome support this method.