スタイルシートのオンオフや違うスタイルに変更できると何かと使えるのでは・・・
と前からちょこっと思ってまして、調べてみました。
やっぱり、Javascriptを使うみたいで、
以下のアドレスから外部JSファイルをダウンロード
http://www.alistapart.com/d/alternate/styleswitcher.js
あとは、
スタイルシートを適用させたいファイルの
<head>〜<head>内に
<script type="text/javascript" src="styleswitcher.js"></script>
ダウンロードした外部JSファイルを読み込ませ、外部スタイルシートの設定は以下の様にします。
<link rel="stylesheet" type="text/css" href="a.css" title="css1" />
<link rel="alternate stylesheet" href="b.css" type="text/css" title="css2" />
<link rel="alternate stylesheet" href="c.css" type="text/css" title="css3" />
title属性をつけて名前をつけておくのがミソ。
a.css（タイトル「css1」）、b.css（タイトル「css2」）、c.css（タイトル「css3」）これらのスタイルを入れ替えるっちゅうことです。
切り替えは今回は簡単にリンクでやってみると、
<a href="#" onclick="setActiveStyleSheet('css1'); return false;">スタイル1</a>
<a href="#" onclick="setActiveStyleSheet('css2'); return false;">スタイル2</a>
<a href="#" onclick="setActiveStyleSheet('css3'); return false;">スタイル3</a>
これでイケます。たぶん。
コメント (2)
スタイルシートを切り替えると同時に、クッキーなんかへ
スタイルシートの情報を保存してあげると、次回参照時
切り替えたスタイルシートが標準になってたりして
少し幸せになれます。
Posted by: ふくし | 2005年08月24日 08:55
日時: : 2005年08月24日 08:55
ここで紹介したJSファイルは、
一応、クッキー対応だったと思います。
ちなみにK1トップページにも採用してみた。
Posted by: kuroda | 2005年08月24日 09:49
日時: : 2005年08月24日 09:49