mozilla
Your Search Results

    insertRule Redirect 1

    The CSSStyleSheet.insertRule() method inserts a new style rule into the current style sheet.

    For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content. If several rules are given in the DOMString in parameter a DOMException with the code SYNTAX_ERR is thrown.

    Syntax

    stylesheet.insertRule(rule, index)

    Parameters

    • rule is a DOMString containing the rule to be inserted (selector and declaration).
    • index is a unsigned int representing the position to be inserted.

    Examples

    Example 1

    // push a new rule onto the top of my stylesheet
    myStyle.insertRule("#blanc { color: white }", 0); 
    

    Example 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} rules 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 styleEl = document.createElement('style');
      document.head.appendChild(styleEl);
      // Apparently some version of Safari needs the following line? I dunno.
      styleEl.appendChild(document.createTextNode(''));
      var s = styleEl.sheet;
      for (var i=0, rl = rules.length; i < rl; i++) {
        var j = 1, rule = rules[i], selector = decl[0], propStr = '';
        // If the second argument of a rule is an array of arrays, correct our variables.
        if (Object.prototype.toString.call(rule[1][0]) === '[object Array]') {
          rule = rule[1];
          j = 0;
        }
        for (var pl=rule.length; j < pl; j++) {
          var prop = rule[j];
          propStr += prop[0] + ':' + prop[1] + (prop[2] ? ' !important' : '') + ';\n';
        }
        s.insertRule(selector + '{' + propStr + '}', s.cssRules.length);
      }
    }

    Specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,