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
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
insertRule()Chrome 完全対応 ありEdge 完全対応 12Firefox 完全対応 1IE 完全対応 9Opera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android 完全対応 あり
index is optionalChrome 完全対応 60Edge 完全対応 ≤79Firefox 完全対応 55IE 未対応 なしOpera 完全対応 47Safari ? WebView Android 完全対応 60Chrome Android 完全対応 60Firefox Android ? Opera Android 完全対応 44Safari iOS ? Samsung Internet Android 完全対応 8.0

凡例

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

古いブラウザーの対応

Internet Explorer 8 以前

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

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

関連情報