アキラのＩＴメモ：CSS切替のできるスクリプト styleswitcher.js

ＩＴ関係、技術関係のメモです。

ホーム > ITメモ > CSS切替のできるスクリプト styleswitcher.js

CSS切替のできるスクリプト styleswitcher.js

他サイトですが、JavaScriptによるCSS切り替えをやったのでメモとして残しておきます。ここではA List Apartというサイトで配布されているスクリプトを利用してCSSを切り替える方法を説明します。

まずは、styleswitcher.jsをダウンロードします。次にスタイルシートを用意するHTMLのヘッダ<head>～</head>間に以下のように記述します。ここでは、切り替えたいCSSが3つ(css1.css、css2.css、css3.css)あるとしています。

<link rel="stylesheet" type="text/css" 
  href="css1.css" title="default" />
<link rel="alternate stylesheet" type="text/css"
  href="css2.css" title="alternate1" />
<link rel="alternate stylesheet" type="text/css"
  href="css3.css" title="alternate2" />
<script type="text/javascript" src="styleswitcher.js"></script>

ちなみに、styleswitcher.jsをスタイルシートの指定より前に読み込むとブラウザによってはうまく動かなくなることがありました（ページを移動しても反映されない）。順番は大事なのかも。あとは、切り替え用のリンクを貼るだけです。例えば、単純にaタグを使う場合は、

<a href="#" 
  onclick="setActiveStyleSheet('default'); return false;">css1</a>
<a href="#" 
  onclick="setActiveStyleSheet('alternate1'); return false;">css2</a>
<a href="#" 
  onclick="setActiveStyleSheet('alternate2'); return false;">css3</a>

あるいは、selectで選択させるようにするには

<select 
  onchange="setActiveStyleSheet(this.options[this.selectedIndex].value)">
<option value="default" selected="selected">css1</option>
<option value="alternate1">css2</option>
<option value="alternate2">css3</option>
</select>

といった具合です。

なお、このstyleswitcher.jsにはクッキー機能が付いているため、一度スタイルを変更すると、他のページに移動しても同じスタイルで閲覧ことができるようになります。

カテゴリ: 各種ツール投稿日: 2006年11月30日 00:00
Trackback URL: http://akira-site.net/cgi-bin/mt/mt-tb.cgi/384

前のエントリ：IBM Resucure and Recoveryのパスワード
次のエントリ：Movable Type 3.33に移行