StyleSheetオブジェクトのCSSの使い方は?
CSSのStyleSheetオブジェクトはスタイルシートを表すもので、それによってスタイルシートの内容を操作・変更することができる。
まず、以下のコードでスタイルシートオブジェクトを取得できます:
var styleSheet = document.styleSheets[0];
スタイルシートの内容を操作するには、StyleSheetオブジェクトのメソッドとプロパティを使用できます。以下はその一般的なものの一部です。
- CSSRules
var rules = styleSheet.cssRules;
- ruleをindexに挿入する
styleSheet.insertRule("body { background-color: red; }", 0);
- index のルールを削除
styleSheet.deleteRule(0);
- addRule(セレクタ、スタイル、インデックス)
styleSheet.addRule("body", "background-color: red;", 0);
- removeRule(index) のネイティブな日本語のパラフレーズ: ルールを削除 (index)
styleSheet.removeRule(0);
- cssText
var cssText = styleSheet.cssText;
styleSheet.cssText = "body { background-color: red; }";
なお、上記の方法でindexで渡す引数は、スタイルシート内での操作対象となるルールの位置を表します。
StyleSheetオブジェクトのメソッドとプロパティを利用することで、スタイルシートを編集(増、減、改、査)することが可能となる。