styleswitcher cssをjavascriptで切り替える

まずは実装サンプルを確認

designA
designB
designC

HTML

styleswitcherを入れたい箇所に以下のソースを張り付け、適宜内容を修正する。

<ul class="listing">
<li><a href="#" onclick="setActiveStyleSheet('designA'); return false;">designA</a></li>
<li><a href="#" onclick="setActiveStyleSheet('designB'); return false;">designB</a></li>
<li><a href="#" onclick="setActiveStyleSheet('designC'); return false;">designC</a></li>
</ul>

JSファイルの準備

本サイトからファイルをダウンロードし、templates/footer.htmlに読み込む。

<script src="/js/styleswitcher.js"></script>

cssファイルの読み込み

基本となるCSSファイルと、代替えのCSSファイルを、templates/header.htmlに読み込む。

<link href="/css/style.css" title="designA" rel="stylesheet">
<link href="/css/styleB.css" title="designB" rel="alternate stylesheet">
<link href="/css/styleC.css" title="designC" rel="alternate stylesheet">