style要素は、
document.getElementsByTagName( 'style' )
または
document.styleSeets
または
document.styleSeets
で得られます。返り値は配列。文書中の最初のスタイル要素は
document.getElementsByTagName( 'style' )[0]
または
document.styleSheets[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 = "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 ;
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｜英語
コメント