向当前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' : '') + ';\n';
        }
 
        if (s.insertRule) {
            s.insertRule(selector + '{' + rulesStr + '}', s.cssRules.length);
        }
        else { /* IE */
            s.addRule(selector, rulesStr, -1);
        }
    }
}

代码来自https://developer.mozilla.org/en-US/docs/DOM/CSSStyleSheet/insertRule

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支持这个方法