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

2008年1月28日 22:56

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

▼とりあえずサンプルはこちら
Javascriptによる外部CSSファイルの切り替えサンプル

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

▼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を認識させています。(と思ってますｗ)

トラックバックURL

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

コメントを投稿





承認されるまでコメントは表示されません。しばらくお待まちください。

ページトップへ