まずは何はなくともJSを読み込む

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

次にCSSを切り替えたいlinkタグにid:switchstyle + [任意の数字]を付与。

<link href="css/middle.css" rel="stylesheet" type="text/css" media="all" id="styleswitch1" />
<link href="css/black.css" rel="stylesheet" type="text/css" media="all" id="styleswitch2" />
<link href="css/right.css" rel="stylesheet" type="text/css" media="all" id="styleswitch3" />

ここは別に連番でもそうでなくても良いですし、01とか02とか、頭にゼロがついてても良いです。

お次はスタイルを切り替えるスイッチ部分には、ulタグかolタグにlinkタグに付けたidと同じclassを付与。idじゃないですよ？classですよ。class。
ほんでもってスイッチ部分になるliタグのclassには切り替えたいCSSのファイル名をつけます。

<ul class="styleswitch1">
<li class="big">大</li>
<li class="middle">中</li>
<li class="small">小</li>
</ul>
<ul class="styleswitch2">
<li class="black">黒</li>
<li class="red">赤</li>
<li class="blue">青</li>
</ul>
<ul class="styleswitch3">
<li class="right">右</li>
<li class="left">左</li>
</ul>

ここは縛りがきついかもしれませんが、マークアップはulタグかolタグ限定です。そしてさらに注意点としてliタグにはCSSファイル名以外のクラスは付けられません。仕様です。どういうことかというと、<li class="black hoge">とかはアウトってことです(ファイル名がblack hoge.cssならもちろん問題ありませんが。)。

以上で設置は完了。なんとなく挙動は分かるかと思いますが、class:styleswitch1の中のliタグをクリックするとid:styleswitch1のlinkタグのCSSが切り替わるってスンポーです。番号で紐づいているので、linkタグにはid:styleswitch99があるのに、ul(ol)タグにclass:styleswitch99がないとエラーが出るのでご注意を。ちなみに、JSの認識できる数字までなら1個でも2個でも100個でも設定できます。試してないけど。

またクッキーを使用しているので、2回目にアクセスしたときには以前の設定が残ったままになります。

注意点

• スイッチ部分のマークアップはulタグかolタグで。
• liタグにはCSSファイル名のclassしか付けられない。
• 各グループのCSSファイルは全て同一ディレクトリに配置してください。(上の例で言うとstyleswitch1のbig.css,middle.css,small.cssは同一ディレクトリじゃないとダメ。big.cssとstyleswitch2のred.cssは別々のディレクトリでもOKです。)

対象ブラウザ

• WindowsIE6,7
• Firefox2以上
• Opera9.25以上
• Safari2以上

あとJavaScriptが無効な環境の対策として、サンプルでは要素をCSSでdisplay:noneで消して、JSでdisplay:blockを使って出しています。デフォルトではblockになっていますが、バグ対策やらで、inlineとかにしたい人はJSの頭の方にあるvar style = "block"のblockの部分をinlineとかに変えてください。
そもそもJS効いてない環境なんて考える必要がない！って場合は、上記の箇所と27行目のlist[n][j].style.display = style;って箇所を消せばOK。間違っても頭の方だけ消したりしないように。エラーでるお。

問題点としては、CSSを読み込む一瞬Firefoxだと見た目がおかしくなっちゃうところ。。。画像の先読みみたいなことをやろうとしたんですが、リンク要素をdocument.createElementして、href属性を指定しても先読みできなかった！styleswitcher.jsみたいに最初からHTML上に書いておくって方法もあったんだけど、headが余計に長くなるのはなんか嫌だし。誰かうまいやり方を教えてくれないかしら。

最後にサンプルやらソースをば。

サンプルページ

サンプルで使用しているJSやらCSSやら一式

MITライセンスなので使いたい方ご自由にカスタマイズどぞー。