mozilla
Your Search Results

    CSSStyleSheet.insertRule()

    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 stylesheets (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 (rules) {
      var styleEl = document.createElement('style'),
          styleSheet;
    
      // Append style element to head
      document.head.appendChild(styleEl);
    
      // Grab style sheet
      styleSheet = styleEl.sheet;
    
      for (var i = 0, rl = rules.length; i < rl; i++) {
        var j = 1, rule = rules[i], selector = rules[i][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';
        }
    
        // Insert CSS Rule
        styleSheet.insertRule(selector + '{' + propStr + '}', styleSheet.cssRules.length);
      }
    }

    Specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support (Yes) (Yes) 8 (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