制作記事 Web制作マークアップJavaScriptスタイルシートを変更する

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

スタイル変更ボタンを設置し、スタイルシートごとごっそり置き換える。
これは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”~
  • title=”styleswitch~”
  • onclick=”setActiveStyleSheet(‘styleswitch~’);return false;”

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