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 で処理を中止します。


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


 * 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
  ['h2', // Also accepts a second argument as an array of arrays instead
    ['color', 'red'],
    ['background-color', 'green', true] // 'true' for !important rules 
    ['background-color', 'yellow']
function addStylesheetRules (rules) {
  var styleEl = document.createElement('style'),

  // Append style element to head

  // 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 の定義
廃止された 初期定義


We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,