ウェブ学のすすめ

Study of Web Design & Programing

JavaScriptでCSSを切り替える「styleswitch.js」

JavaScript CSS

サイトに訪れたユーザーがページ上で簡単にスタイルシートを切り替えることができる方法を調べてみました。
いくつか方法がありましたが「styleswitch.js」で切り替える方法をご紹介します。


↓別ウィンドウを開いてみる
JavaScriptでCSSを切り替える「styleswitch.js」

ステップ１：styleswitch.jsのダウンロード


Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

↓「styleswitch.js」を右クリックして「名前を付けてリンク先を保存」

ステップ２：設置

head部分
<link rel="stylesheet"href="default.css">
<link rel="alternate stylesheet" title="blue-theme" href="user.css">
<link rel="alternate stylesheet" title="brown-theme" href="user2.css">
<script src="styleswitch.js"></script>
  • デフォルトのCSSを一番上に設置
  • 切り替え用のCSSのrel属性は「alternate stylesheet」を指定
  • title属性にCSSを判別するための名前(任意)を指定
  • styleswitch.jsを読み込む(jQueryは必要ありません)
body部分

※数字の60はクッキー保持日数を表します。
↓リンク

<a href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>
<a href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>
<a href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>

↓ラジオボタン

<form id="switchform">
<input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)">Default style<br>
<input type="radio" name="choice" value="blue-theme" onClick="chooseStyle(this.value, 60)">Blue Theme<br>
<input type="radio" name="choice" value="brown-theme" onClick="chooseStyle(this.value, 60)">Brown Theme
</form>

↓セレクトメニュー

<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="brown-theme">Brown Theme</option>
</select>
</form>