このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
CSSStyleSheet: insertRule() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
CSSStyleSheet.insertRule() メソッドは、新しい CSS ルールを現在のスタイルシートに挿入します。
メモ:
insertRule() は CSSStyleSheet 専用のメソッドですが、実際にはルールを CSSStyleSheet.cssRules に、内部的には CSSRuleList に挿入します。
構文
js
insertRule(rule)
insertRule(rule, index)
引数
返値
スタイルシートのルールリスト内の、新たに挿入されたルールの位置です。
例外
IndexSizeErrorDOMException-
index>CSSRuleList.lengthの場合に発生します。 HierarchyRequestErrorDOMException-
CSS の制約上、
ruleがindex0に挿入できない場合に発生します。 SyntaxErrorDOMException-
rule引数に 2 つ以上のルールが与えられた場合に発生します。 HierarchyRequestErrorDOMException-
スタイルルールの後に
@importアットルールを挿入しようとした場合に発生します。 InvalidStateErrorDOMException-
ruleが@namespaceであり、ルールリストに@importアットルールや@namespaceアットルール以外のものがあった場合に発生します。
例
新しいルールの挿入
このスニペットは、新しいルールをスタイルシートの先頭に追加します。
js
myStyle.insertRule("#blanc { color: white }", 0);
スタイルシートルールを追加する関数
js
/**
* 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) {
const styleEl = document.createElement("style");
// Append <style> element to <head>
document.head.appendChild(styleEl);
// Grab style element's sheet
const styleSheet = styleEl.sheet;
for (let i = 0; i < rules.length; i++) {
let 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 (let pl = rule.length; j < pl; j++) {
const prop = rule[j];
propStr += `${prop[0]}: ${prop[1]}${prop[2] ? " !important" : ""};\n`;
}
// Insert CSS Rule
styleSheet.insertRule(
`${selector}{${propStr}}`,
styleSheet.cssRules.length,
);
}
}
仕様書
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-cssstylesheet-insertrule |
ブラウザーの互換性
Loading...