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);
}
}
仕様書
ポリフィル
以下のポリフィルは、 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);
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
Update compatibility data on GitHub
| デスクトップ | モバイル | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 基本対応 | Chrome 完全対応 あり | Edge 完全対応 あり | Firefox 完全対応 あり | IE 完全対応 9 | Opera 完全対応 あり | Safari 完全対応 あり | WebView Android 完全対応 あり | Chrome Android 完全対応 あり | Edge Mobile 完全対応 あり | Firefox Android 完全対応 あり | 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 | Edge Mobile ? | Firefox Android ? | Opera Android 完全対応 47 | Safari iOS ? | Samsung Internet Android ? |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装状況不明
- 実装状況不明
古いブラウザーの対応
Internet Explorer 8 以前
addRule(selector, rule [, index]); — 例: addRule('pre', 'font: 14px verdana'); // 規則を末尾に追加
また、標準外の removeRule() および .rules が、それぞれ deleteRule() および .cssRules の代わりに使用されていることにも注意してください。