mozilla
您的搜索结果

    CSSStyleSheet.insertRule()

     
    概述

    insertRule方法用来给当前样式表插入新的样式规则.

    语法

    stylesheet.insertRule(rule, index)

    参数

    • rule是一个字符串,包含了要插入的样式规则(选择器和样式声明).
    • index是一个数字,表示了要插入的位置.

    示例1

     // 在样式表的最顶处插入一个新规则
     myStyle.insertRule("#blanc { color: white }", 0); 
    

    示例2

    /**
     * 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);
            }
        }
    }
    

    附注

    对于普通样式规则来说,要插入的字符串应该包含选择器和样式声明.对于@规则来说,要插入的字符串应该包含@标识符和样式规则的内容.

    相关链接

    规范

    文档标签和贡献者

    Contributors to this page: teoli, ziyunfei, arunpandianp
    最后编辑者: teoli,