styleswitcher.jsでスタイルシート切り替え

（つくば：カエル）

2007年09月12日

at 17:39
posted by @
comments(0)

styleswitcher.jsでスタイルシート切り替え

会社のホームページでは左のようにフォントサイズをページのボタンで変更できるようになってます。
prototype.jsを用いたフォントサイズ変更スクリプトを利用して実装しているのですが、今回は別のスクリプトを利用して実装することに。

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsが紹介しているstyleswitcher.js。
前者がフォントサイズのみを変更するモノなら、後者はスタイルシートさえ作れば概観をすべて変えられるモノ。

設置方法はstyleswitcher.jsが結構メジャーみたいなので、色々なサイトで取り上げられているが、私的メモ代わりに記しておく。

styleswitcher.jsはA List Apart: Articles: Alternative Style: Working With Alternate Style Sheetsのページ下部、「Download styleswitcher.js」からダウンロードする。

が、悲しいことに、このままではFirefoxで（WinのFirefox バージョン2.0.0.6で確認）エラーが出るので一部を修正。

[4行目]
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {

[14行目]
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");

[22行目]
if(a.getAttribute("rel").indexOf("style") != -1

[変更]
if(a.getAttribute("rel") && a.getAttribute("rel").indexOf("style") != -1

ウンともスンとも言わなかったstyleswitcher.jsがFirefoxで動きますピース

参考：7-1：フォントサイズをユーザ側で切り替え
本当に、ありがとうデンマークの人!!

次にHTMLの<head></head>内に以下を追加。

<script src="styleswitcher.js" type="text/javascript"></script>

スタイルシートはHTMLの<head></head>内に以下のように追加。

<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="alternate stylesheet" type="text/css" href="css/font/small.css" title="Small" />

1行目がデフォルトで読み込むスタイルシート。
2行目が切り替えるスタイルシート。
切り替えるスタイルシートを増やす場合は2行目をコピーで。

切り替えのボタンはa要素にonclickイベントで実現。