首页 / 脚本样式 / JavaScript / 向当前style sheet中插入一个新的style实现方法

很少会插入一个新的style rule，今天为了临时解决页面样式问题，需要更新很多页面的一些样式，这些页面都引用了一个公共的js，为了方便，直接在这个公共的js里面向style sheet插入新的style rule。

先看代码：
复制代码 代码如下:
/**
* 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" : ""） + "; ";
}
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"]]）

执行后当前document的head标签内，多了一个style
复制代码 代码如下:
<style>
div.content{color:#000;border:1px solid}
</style

知道怎么调用了吧，每次调用都会插入一个新的style，所以最好调用一次，插入多个rule
复制代码 代码如下:
addStylesheetRules（
[selector, [attr, value], …],
[selector, [attr, value], …]
）;

主要用到两个方法：
标准方法：stylesheet.insertRule（rule, index）
rule：被插入的rule，如 div.content{color:#000}
index: 插入顺序，先后顺序会影响样式的。从0开始
firefox、chrome、opera、safri、ie从ie9开始也支持这个方法
ie的stylesheet.addRule （selector, styleDef [, positionIndex]）;
selector：如div.content
styleDef：如color:#000
positionIndex：默认-1，插入到末尾
ie、safari、chrome支持这个方法