CSSStyleSheet.insertRule()

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

さらに特記事項として、insertRule()CSSStyleSheet の排他的なメソッドであるため、実際には規則を CSSRuleList 内に挿入します。

その種類によって含まれなければならない規則: 規則集合の場合、規則は、セレクターとスタイル宣言の両方を指定します。@-規則の場合、規則は、@-識別子と規則コンテンツを指定します。

構文

stylesheet.insertRule(rule, index)

引数

  • rule は、挿入される規則を含む DOMString
    ここで、規則は セレクター と宣言、または @-識別子 と規則コンテンツを指定します。
  • index は、stylesheet.cssRules の挿入先の位置を表す 符号なし整数値
    また、index-0 が最初の規則となり、index-max が最後の規則の次の値になります。この index-max は、スプレッドシート内の stylesheet.cssRules の length 値と同じです。

注記: index の指定は必須になりました。これを省略すると、警告またはエラーの原因になります。例えば:

  • Chrome の場合: " [Warning-icon] Calling CSSStyleSheet.insertRule() with one argument is deprecated. Please pass the index argument as well"

戻り値

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

制限事項

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

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

例1

// myStyle の先頭に新しい規則を挿入
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 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);
  }
}

仕様

仕様書 策定状況 備考
CSS Object Model (CSSOM)
CSSStyleSheet.insertRule の定義
草案 Document Object Model (DOM) Level 2 Style Specification からの変更なし。
Document Object Model (DOM) Level 2 Style Specification
CSSStyleSheet.insertRule の定義
勧告 初期定義

ブラウザーの実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート (有) (有) 9 (有) (有)
機能 Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート (有) (有) (有) (有) (有) (有)

従来のブラウザーのサポート

  • Internet Explorer - pre v9

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

    deleteRule().cssRules の代わりとなる非標準の removeRule().rules にも注意してください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: Marsf, fscholz, khalid32, jislotz
 最終更新者: Marsf,