来杭一周，收获很多，成长很多。
周六在搞一个插件的时候碰到需要动态添加伪元素的需求，搜了一下解决方案，有人用正则写出了读取伪元素的函数；我觉得倒是可以通过注入css rule的方式，来让预留有某些类的标签动态产生伪元素。
然后在google上搜到这样一篇文章，讲了一下之前没了解到的api函数：addrule等，翻译一下，分享一下好了。
原博文网址：http://davidwalsh.name/add-rules-stylesheets
译文如下：
因为我们在开发中javascript使用的越来越多，所以我们总是想尽办法想让它更快。我们使用事件代理来监听事件，使用函数节流来限制单位时间内函数的调用次数，使用loader方法来加载最需要的资源。这些方法都可以让我们的页面加载、渲染、执行的速度有一定的加快。本文要说另一种方法：通过动态添加删除CSS样式代替原有的查找节点并修改来应用某些样式。
- 获取样式表
我们可以选择向页面内的某条stylesheet中添加样式。可以给<link>标签或者<style>标签添加ID，通过引用节点的sheet属性来获取CSSStyleSheet对象。页面中的stylesheets可以使用document.styleSheets来获取：
var sheets = document.styleSheets;
// returns an Array-like StyleSheetList
//返回一个类数组对象
/*
Returns:
StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
*/
// Grab the first sheet, regardless of media
//先不管第一个样式的具体应用media（注：可能是print等）
var sheet = document.styleSheets[0];
在我们选取link或者style标签时，我们应该考虑被选中的样式表标签是否是应用于screen，而不是print等。CSSStyleSheet对象给我们提供了这样的属性：
// Get info about the first stylesheet
console.log(document.styleSheets[0]);
/*
Returns:
CSSStyleSheet
cssRules: CSSRuleList
disabled: false
href: "http://davidwalsh.name/somesheet.css"
media: MediaList
ownerNode: link
ownerRule: null
parentStyleSheet: null
rules: CSSRuleList
title: null
type: "text/css"
*/
// Get the media type
//获取media类型
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
"all" or "print" or whichever media is used for this stylesheet
*/
当然除了上面的，还有别的方法可以获取stylesheet对象。
- 创建新样式表
有些情况下，可能新建一个style节点来承装新添加的style rule。方法很简单：
var sheet = (function() {
// Create the <style> tag
var style = document.createElement("style");
// Add a media (and/or media query) here if you‘d like!
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")
// WebKit hack :(
//webkit内核浏览器的hack：
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page 插入页面
document.head.appendChild(style);
return style.sheet;
})();
请留意上面第三条语句是为webkit浏览器添加的hack。
- 插入规则 insertRule(styles,[index])
Stylesheets对象提供了insertRule（译者注：IE8及以下不兼容，具体参考链接http://www.quirksmode.org/dom/w3c_css.html ）方法。insertRule函数要求传入css样式风格的str作为参数。
具体调用方法：
sheet.insertRule("header { float: left; opacity: 0.8; }", 1);
（译者注：传入的样式str的格式要求很多。就我目前发现的：1.{}两个花括号和前后最好都有一个空格 2.如果是webkit内核，函数在解析带有-moz-前缀的样式规则时会抛err）
这种方法看上去有点丑，但是确实有用。第二个参数Index，表示我们将在样式内部的哪一条插入新样式css rule，这就可以帮助我们实现原有样式的覆盖。默认index取值是-1(译者注：但是输入-1在chrome 41下抛了err，提示参数不能小于0，这里值得在研究一下)，表示默认在样式最后追加。如果想强制覆盖，可以使用！important，来避免插入次序引起其他问题。
- 添加规则（非标准函数） addRule(selector,styles,index)
CSSStyleSheet对象有一个非标准函数addRule，和insertRule相比，它更像js api的调用风格，无需自己注意插入的样式字符串的格式。addRule方法接受三个参数，分别是选择器selector，样式字符串"color:red;font-size:12px",和插入次序index。
sheet.addRule("#myList li", "float: left; background: red !important;", 1);
方法有返回值，为-1。但是没有什么具体含义。
这种方式可以快速高效的改变页面上节点的已有样式。
- 应用样式
因为上面提到两个函数都不是常见api函数，所以需要做浏览器兼容性处理。
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}
// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");
这种方法可以应用于所有高级的浏览器，如果还是有担心的话，可以在调用时使用try-catch结构。
- 为Media queries插入样式规则
如果你需要插入media-queries的css样式规则，你只能使用第一个insertRule方法。
sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");
IE不支持insertRule函数，所以另一种方法是创建style标签节点，通过写入的方式来注入样式规则。
动态添加样式规则是有效且容易的。在下一个应用里尝试一下吧，你会发现这个真的很好用~
译文结束