Rarely inserts a new style rule, today in order to temporarily resolve the page style problem, need to update a number of page styles, these pages are referred to a public JS, in order to facilitate, directly in this public JS inside the style sheet insert new style rule.
First look at the code:
Copy Code code as follows:
/**
* Add a stylesheet to the document (May is better practice, however,
* To dynamically change classes, so style information can is kept in
* Genuine styesheets (and avoid adding extra to the DOM)
* Note this is needed for declarations and rules since ECMAScript does
* Not afford a predictable object iteration the order and since the 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 code as follows:
Addstylesheetrules (["Div.content", ["Color": "#000"], ["Border-width", "1px"], ["Border-style", "solid"]]
After executing the head tag of the current document, one more style
Copy Code code as follows:
<style>
Div.content{color: #000; border:1px Solid}
</style
Know how to call it, each call will insert a new style, so it is best to call once, insert multiple rule
Copy Code code as follows:
Addstylesheetrules (
[Selector, [attr, value], ...],
[Selector, [attr, value], ...]
);
The main use of two methods：
Standard method: stylesheet.insertrule (rule, index)
Rule: Inserted rule, such as Div.content{color: #000}
Index: the insertion Order, in which the order affects the style. Starting from 0
Firefox, Chrome, opera, Safri, IE also support this approach from IE9
IE Stylesheet.addrule (selector, styledef [, Positionindex]);
Selector: such as Div.content
Styledef: such as color: #000
Positionindex: Default-1, insert to end
IE, Safari, chrome support this method
