スタイルシートのルールの追加

スタイルシートのルールを追加するには、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);
}

JavaScript逆引きリファレンス一覧へ戻る