複数用意したcssファイルをリンククリックで切り替えます。
1.読み込むJs
<script src="styleswitch.js" type="text/javascript"></script>
2.用意したCSSファイル
default.css:始めから読み込むcssファイル
body{ background-color:#FFF; color:#000; font-size:14px; margin:0; padding:0; }
css1.css:切替用cssファイル1
body{ background-color:#333; color:#FFF; font-size:18px; margin:0; padding:0; }
css2.css:切替用cssファイル2
body{ background-color:#FF9; color:#09F; font-size:24px; margin:0; padding:0; }
3.HTMLの記述例
liタグのリンクをクリックすると読み込むcssファイルが切り替わります。 <h1>下のリンクをクリックすると、読み込む(cssファイル)スタイルシートが切り替わります。</h1> <ul> <li><a href="javascript:chooseStyle('none', 30)">デフォルト</a></li> <li><a href="javascript:chooseStyle('title1', 30)">スタイル1</a></li> <li><a href="javascript:chooseStyle('title2', 30)">スタイル2</a></li> </ul>
J読み込む(cssファイル)スタイルシートを切り替えるデモページ
ソース元:Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)