JavaScriptを使ったCSSの切り替え - styleswitcher

head部分にスタイルシートをリンクさせtitle属性に適当な値を入れます
代替用のスタイルシートは、linkタグのrel属性を、"stylesheet"ではなく"alternate stylesheet"としてください。
そしてダウンロードした、"styleswitcher.js"を、HTMLにリンクます。
＜head＞＜/head＞内のlink要素にrel属性以外のものが混じっているとstyleswitcher.jsが動作しません。
その場合、rel属性以外（rev属性等）を削除するか、rel属性の記術より上に書くことで解決します。

ダウンロードサイト　→　styleswitcher.js
エントリーの中にあるDownload styleswitcher.jsからダウンロードできます。

1

2

3

HTML ▼
        <head>
        <link rel="stylesheet" type="text/css" href="style.css" title="standard" />
        <link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1" />
        <link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2" />
        <script type="text/javascript" src="styleswitcher.js"></script>
        </head>

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

        <a href="#" onclick="setActiveStyleSheet('standard'); return false;">基本スタイル</a>
        <a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">代替スタイルその1に変更</a>
        <a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">代替スタイルその2に変更</a>

Firefoxで確認すると動かなかったので、いろいろ調べてみると@inつくばさんのブログに解決方法が書いてありました。

styleswitcher.jsに修正が必要なようです。

修正箇所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