スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。
これはCSSとJavascriptの組み合わせで実現させる。
動作確認環境
- Windows 2000
- InternetExplorer6 Opera9 Firefox1.5 Netscape7.1
- Mac OS X
- Safari2 Opera9 Firefox2.0 Netscape7.1 InternetExplorer5.2
用意するもの
- 「http://alistapart.com/d/alternate/styleswitcher.js」をローカルにコピー、ファイル名は任意（ここでは、「styleswitcher.js」とします）。
- 変更させたいスタイルシートを用意する（ここでは、「styleswitch1.css」「styleswitch2.css」「styleswitch3.css」の3ファイル用意したとする）。
(x)html内に記述する内容
xhtml headタグ内
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch1.css” title=”styleswitch1″ media=”screen, projection, tv” />
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch2.css” title=”styleswitch2″ media=”screen, projection, tv” />
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch3.css” title=”styleswitch3″ media=”screen, projection, tv” />
<script type=”text/javascript” src=”styleswitcher.js”></script>
xhtml bodyタグ内
<div><a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch1’);return false;”>type1</a> <a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch2’);return false;”>type2</a> <a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch3’);return false;”>type3</a></div>
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch1.css” title=”styleswitch1″ media=”screen, projection, tv” />
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch2.css” title=”styleswitch2″ media=”screen, projection, tv” />
<link rel=”alternate stylesheet” type=”text/css” href=”styleswitch3.css” title=”styleswitch3″ media=”screen, projection, tv” />
<script type=”text/javascript” src=”styleswitcher.js”></script>
xhtml bodyタグ内
<div><a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch1’);return false;”>type1</a> <a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch2’);return false;”>type2</a> <a href=”javascript:void(0);” onclick=”setActiveStyleSheet(‘styleswitch3’);return false;”>type3</a></div>
ポイント
- <link rel=”alternate stylesheet”～
- title=”styleswitch～”
- onclick=”setActiveStyleSheet(‘styleswitch～’);return false;”
Javascriptが有効でないと適用されないため、(x)html内のtype1～3ボタンはjsファイルで外部化することでJavascriptが無効の場合、何も表示させないようにしたほうがよいかも。ちなみにクッキーが有効であれば、ブラウザを閉じて再度開いた場合、最後に選択したスタイルが適用される。