CSSStyleSheet.insertRule()

CSSStyleSheet.insertRule() メソッドは、新しい CSS 規則を現在のスタイルシートに挿入しますが、いくつかの制限があります。

メモ: insertRule() は CSSStyleSheet の排他的なメソッドですが、実際には規則を CSSStyleSheet.cssRules、内部的には CSSRuleList に挿入します。

構文

stylesheet.insertRule(rule[, index])

引数

rule

挿入される規則が入った DOMString です。どのような規則を挿入するかは、種類に依存します。

規則セットの場合、セレクターとスタイル定義です。
@-規則の場合、 @-識別子と規則の内容です。

index Optional

stylesheet.cssRules.length 以下の正の数で、 CSSStyleSheet.cssRules の中で新しく挿入される規則の位置を示します。既定値は 0 です。 (古い実装では、これは必須でした。詳しくはブラウザーの対応を参照してください。)

返値

スタイルシートの規則リスト内の、新たに挿入された規則のインデックスです。

制限事項

CSS スタイルシート規則のリストには、規則がどのようにどこへ挿入されるかに影響する、いくつかの直感的な、またはそれほど直感的でない制限があります。これらに違反すると、 DOMException のようなエラーを引き起こす原因になるでしょう。

index 値が CSSRuleList.length を超える場合、 IndexSizeError で処理を中止します。
CSS の制約により rule が index 0 に挿入できない場合、 HierarchyRequestError で処理を中止します。
rule 引数に 2 個以上の規則を与えた場合、 SyntaxError で処理を中止します。
@import @-規則をスタイル規則の後に挿入しようとした場合、 HierarchyRequestError で処理を中止します。
rule が @namespace @-規則であり、リストに @import @-規則や @namespace @-規則が含まれている場合、 InvalidStateError で処理を中止します。

例

例1

// myStyle の先頭に新しい規則を挿入
myStyle.insertRule("#blanc { color: white }", 0);

例2

/**
 * Add a stylesheet rule to the document (it may be better practice
 * 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 guarantee a predictable object iteration order, and since CSS is 
 * order-dependent.
 * @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');

  // Append <style> element to <head>
  document.head.appendChild(styleEl);

  // Grab style element's sheet
  var styleSheet = styleEl.sheet;

  for (var i = 0; i < rules.length; i++) {
    var j = 1, 
        rule = rules[i], 
        selector = rule[0], 
        propStr = '';
    // If the second argument of a rule is an array of arrays, correct our variables.
    if (Array.isArray(rule[1][0])) {
      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);
  }
}

仕様書

仕様書	状態	備考
CSS Object Model (CSSOM) CSSStyleSheet.insertRule の定義	草案	Document Object Model (DOM) Level 2 Style Specification からの変更なし。
Document Object Model (DOM) Level 2 Style Specification CSSStyleSheet.insertRule の定義	廃止された	初回定義

ポリフィル

以下のポリフィルは、 Internet Explorer 5–8 において、 insertRule の引数の入力を標準に準拠させるものです。 insertRule を関数で補完し、引数を既定のネイティブの insertRule に送る前に、セレクターを規則から分離します。

(function(Sheet_proto){
    var originalInsertRule = Sheet_proto.insertRule;
    if (originalInsertRule.length === 2){ // 2 mandatory arguments: (selector, rules)
        Sheet_proto.insertRule = function(selectorAndRule){
            // First, separate the selector from the rule
            a: for (var i=0, Len=selectorAndRule.length, isEscaped=0, newCharCode=0; i !== Len; ++i) {
                newCharCode = selectorAndRule.charCodeAt(i);
                if (!isEscaped && (newCharCode === 123)) { // 123 = "{".charCodeAt(0)
                    // Secondly, find the last closing bracket
                    var openBracketPos = i, closeBracketPos = -1;
                    for (; i !== Len; ++i) {
                        newCharCode = selectorAndRule.charCodeAt(i);
                        if (!isEscaped && (newCharCode === 125)) { // 125 = "}".charCodeAt(0)
                            closeBracketPos = i;
                        }
                        isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
                    }
                    if (closeBracketPos === -1) break a; // no closing bracket was found!
                    /*else*/ return originalInsertRule.call(
                        this, // the sheet to be changed
                        selectorAndRule.substring(0, openBracketPos), // the selector
                        selectorAndRule.substring(closeBracketPos), // the rule
                        arguments[3] // the insert index
                    );
                }
                // works by if the char code is a backslash, then isEscaped gets flipped (XOR-ed by
                // 1), and if it is not a backslash then isEscaped gets XORed by itself, zeroing it
                isEscaped ^= newCharCode===92?1:isEscaped; // 92 = "\\".charCodeAt(0)
            }
            // Else, there is no unescaped bracket
            return originalInsertRule.call(this, selectorAndRule, "", arguments[2]);
        };
    }
})(CSSStyleSheet.prototype);

ブラウザーの対応

Update compatibility data on GitHub

	デスクトップ						モバイル
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Android 版 Chrome	Android 版 Firefox	Android 版 Opera	iOSのSafari	Samsung Internet
`insertRule()`	Chrome 完全対応あり	Edge 完全対応 12	Firefox 完全対応 1	IE 完全対応 9	Opera 完全対応あり	Safari 完全対応あり	WebView Android 完全対応あり	Chrome Android 完全対応あり	Firefox Android 完全対応 4	Opera Android 完全対応あり	Safari iOS 完全対応あり	Samsung Internet Android ?
`index` is optional	Chrome 完全対応 60	Edge ?	Firefox 完全対応 55	IE 未対応なし	Opera 完全対応 47	Safari ?	WebView Android 完全対応 60	Chrome Android 完全対応 60	Firefox Android ?	Opera Android 完全対応 44	Safari iOS ?	Samsung Internet Android ?

凡例

完全対応: 完全対応
未対応: 未対応
実装状況不明: 実装状況不明

古いブラウザーの対応

Internet Explorer 8 以前

addRule(selector, rule [, index]); — 例: addRule('pre', 'font: 14px verdana'); // 規則を末尾に追加

また、標準外の removeRule() および .rules が、それぞれ deleteRule() および .cssRules の代わりに使用されていることにも注意してください。