JavaScriptでスタイルシートを弄る。

<style>〜</style>の中身を一気に書き換える方法のメモ。

style要素は、
document.getElementsByTagName( 'style' )
または
document.styleSeets

で得られます。返り値は配列。文書中の最初のスタイル要素は
document.getElementsByTagName( 'style' )[0]
または
document.styleSheets[0]

になりますね。

IE 8- 以外のメジャーなブラウザだったら、スタイルの書き換えはこんな感じ。スタイル要素のinnerHTMLを弄れば宜し。
styleTags = document.getElementsByTagName( 'style' ) ;
style_text = "div.test{ font-size:20pt; color:#f00; } div.test2{ font-size: 15pt; }" ;
styleTags[0].innerHTML = style_text ;

style_text は、スタイルタグ内に置きたいテキストそのものです。IE 8- 以外のブラウザの場合、document.styleSheets でスタイル要素にアクセスすると「スタイルタグで囲まれた部分を一気に書き換え」という手段が無さげなので、こんな方法でやってみた。

IE 8- だと、スタイル要素内のinnerHTMLを書き換えようとすると怒られたりするので、cssText というプロパティを弄ります。
styleTags = document.styleSheets[0];
style_text = "div.test{ font-size:20pt; color:#f00; } div.test2{ font-size: 15pt; }" ;
styleTags[0].cssText = style_text ;

いずれの場合も、書き換えたあとにスタイルシートを使用可能にせねばなりません。
styleTags[0].disable = false ;

これで書き換えたスタイルシートがページに適用されます。


あ、上記の例で、innerHTML または cssText に渡すテキストは「スタイルタグ内に置きたいテキストそのもの」なので、例えば外部CSSファイルを呼び出すための「@import なんちゃら」なども含めることができますよ。

各ブラウザにおける、スタイルシート関連のプロパティ一覧はこちらのページが判り易いです → W3C DOM Compatibility - CSS｜英語

カテゴリ:

タグ: