スタイルシートのルールの追加
スタイルシートのルールを追加するには、styleSheet.insertRuleメソッドを使用します。
IE8以下の場合は、styleSheet.addRuleメソッドを使用します。
構文
styleSheet.insertRule(rule, index);IE8以下の場合
styleSheet.addRule(selector, propertyValue);styleSheet.insertRuleメソッド
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
rule | string | 追加するルール 「セレクター{プロパティ:値...}」の文字列 |
| 第二引数 必須 |
index | number | 追加する位置（0から始まるインデックス番号） |
styleSheet.addRuleメソッド
| 引数名 | 型 | 説明 | |
|---|---|---|---|
| 第一引数 必須 |
selector | string | 追加するセレクター |
| 第二引数 必須 |
propertyValue | string | 追加するプロパティと値プロパティ:値で指定 |
サンプルコード
JavaScript
var styleSheetElement = document.createElement('style'),
sheet = null,
selector = '#wrap',
propertyValue = 'color:#d00; text-align:right;';
cssRuleString = selector + ' { ' + propertyValue + ' }';
document.head.appendChild(styleSheetElement);
sheet = styleSheetElement.sheet;
if (sheet.insertRule) {
sheet.insertRule(cssRuleString, sheet.cssRules.length);
} else {
sheet.addRule(selector, propertyValue);
}