フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Style要素を動的に扱う

htmlのheadタグ内に記述したstyleをJavascriptで操作するためのTipsです。

StyleSheetListオブジェクト

document.styleSheetsプロパティには、Htmlのheadタグ内にあるStylesheet関連の情報を保持するStyleSheetListオブジェクトが格納されています。styleタグの中身や、外部スタイルシートCSSStyeSheetオブジェクトとして扱われ、StyleSheetListオブジェクトに格納されます。styleタグから作成されたCSSStyleSheetオブジェクトにはcssRulesプロパティに値が入り、外部スタイルシートにはhrefプロパティに値が入ります。例えば、Htmlのheadタグ内に外部スタイルシートとstyleタグが1つづつ存在する場合は、以下のような構成になります。

CSSStyleSheet
0:CSSStyleSheet(styleタグの内容を保持した場合)
cssRules:CSSRuleList
0:CSSStyleRule
cssText:[ セレクタとそのスタイル ]
1::CSSStyleRule
2::CSSStyleRule
href:null
1:CSSStyleSheet(外部スタイルシートを保持した場合)
cssRules:null
href:[ file path ]
length:function
item:function

例えば、外部スタイルシートが無い場合は以下のようにしてstyleタグ内のスタイルを取得することができます。

<style>
  * {font-size: 10px}
  p {margin: 0;}
</style>
<script>
  var style = document.styleSheets[0].cssRules[1].cssText;
  console.log(style);//p { margin: 0px; }
</script>

Javascriptでstyleタグにスタイルを追加する

スタイルの追加は、CSSStyleSheetオブジェクトのinsertRuleメソッドで追加できます、引数は2つで最初の引数には追加するスタイルを、2つ目の引数には追加する場所を数値で指定します

// head内のstyleタグの一番最初にスタイルを追加する
var style = document.styleSheets[0];
style.insertRule('div {border:solid 1px #000;}', 0);

ただし、IEの場合はaddRuleメソッドを使用します。

Javascriptでstyleタグのスタイルを削除する

CSSStyleSheetオブジェクトのdeleteRuleメソッドを使用することで、headのstyleタグ内のスタイルを削除することができます。CSSStyleSheetオブジェクト内のCSSRuleListには、スタイルがセレクタ単位で分かれており、上から順にインデックスが割り当てられているので、deleteRuleメソッドの引数にインデックスを渡してやると、そのスタイルが削除されます。

<style>
  * {font-size: 10px}  // このスタイルにはインデックス0が割り当てられる
  p {margin: 0;}       // このスタイルにはインデックス1が割り当てられる
</style>
<script>
  // styleタグ内の最後のセレクタ(p {margin: 0;}の部分)を削除する
  var style = document.styleSheets[0];
  style.deleteRule(style.cssRules.length-1);
</script>

ただし、IEの場合はremoveRuleメソッドを使用します。