Javascriptによる外部CSSファイルの切り替え(書き直し)

カテゴリ：Javascript小技 2008年1月28日 22:56

以前同じ記事を書いたんですが、サンプルデータが消えてしまったのと、
紹介があまり詳しくなかったので書き直してみました。
(たまたまこれを利用する機会もあったのでｗ)

Javascriptによる外部CSSファイルの切り替えデモ

ttp://css-eblog.com/eblog_sample/0801/28/css_change/

肝は JavaScriptのみです。JavaScript ソースはこんな感じ↓n

▼EntryMore▼

動作は単純で、まずdocument.getElementsByTagName('link')で link 要素をすべて取得します。取得されたリストを元に、最初の for 文で theme フォルダに格納されている CSS のみをdisabledをtrueにします。

こうすることで、一端すべての theme フォルダ内の CSS を無効化し、次の for 文で選択された theme の CSS を適用させます。(disabled = false)

【補足】

ひとつ目の for 文ですべての処理を一括してもいいのですが、
なぜか IE6、7 では alternate stylesheet があらかじめ読み込まれていないのか、
1 回目の変更では CSS が有効になりませんでした。
なので、一回目の for 文ですべてを無効、という処理を入れることで
alternate stylesheet を認識させています。(と思ってますｗ)

この記事のカテゴリー一覧を見る⇒Javascript小技

パーマリンク
コメント(0)
トラックバック(0)

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/59