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

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

style要素は、

で得られます。返り値は配列。文書中の最初のスタイル要素は

になりますね。

IE 8- 以外のメジャーなブラウザだったら、スタイルの書き換えはこんな感じ。スタイル要素のinnerHTMLを弄れば宜し。

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

IE 8- だと、スタイル要素内のinnerHTMLを書き換えようとすると怒られたりするので、cssText というプロパティを弄ります。

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

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


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

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