向当前style sheet中插入一个新的style实现方法_javascript技巧

/**
* 在文档中添加样式表规则（可能是更好的做法，
* 动态更改类，因此样式信息可以保留在
* 真正的样式表中（并避免向 DOM 添加额外的元素） ))
* 请注意，声明和规则需要一个数组，因为 ECMAScript
* 无法提供可预测的对象迭代顺序，并且 CSS 是
* 顺序相关的（即，它是级联的）；那些不需要
* 级联规则的人可以构建一个更加访问者友好的基于对象的 API。
* @param {Array} decls 接受 JSON 编码声明的数组
* @example
addStylesheetRules([
['h2', // 还接受第二个参数作为数组的数组而是
['color', 'red'],
['background-color', 'green', true] // 'true' ！重要规则
],
['. myClass',
['背景颜色', '黄色']
]
]);
*/
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);
}
}
}

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

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