0から目指すWebマスター Web制作に関する備忘録
検索

JavaScript

スタイルシートを変更する

スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。
これはCSSとJavascriptの組み合わせで実現させる。

動作確認環境

Windows 2000
InternetExplorer6 Opera9 Firefox1.5 Netscape7.1
Mac OS X
Safari2 Opera9 Firefox2.0 Netscape7.1 InternetExplorer5.2

用意するもの

(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>

ポイント

Javascriptが有効でないと適用されないため、(x)html内のtype1~3ボタンはjsファイルで外部化することでJavascriptが無効の場合、何も表示させないようにしたほうがよいかも。ちなみにクッキーが有効であれば、ブラウザを閉じて再度開いた場合、最後に選択したスタイルが適用される。