styleswitch.jsを使って読み込むスタイルシート（cssファイル）を切り替える方法｜DAD UNION

styleswitch.jsを使って、読み込むスタイルシート（cssファイル）を切り替える方法をご紹介します。
用意した複数のcssファイルをリンククリックで切り替えます。

Contents

styleswitch.jsファイルを読み込む
3つのCSSファイルを用意しました
styleswitch.jsを使って、読み込むスタイルシート（cssファイル）を切り替えるHTMLの記述
読み込む（cssファイル）スタイルシートを切り替えるデモページ
ソース元：Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

styleswitch.jsファイルを読み込む

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

3つのCSSファイルを用意しました

※3つのCSSファイルでは背景色、文字サイズ、文字色を変更してます。

default.css：デフォルトcssファイル

<link rel="stylesheet" type="text/css" href="default.css" />

※default.cssの内容は以下の通りです。

body{
	background-color:#FFF;
	color:#000;
	font-size:14px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

css1.css：切替用cssファイル１

<link rel="alternate stylesheet" type="text/css" media="screen" title="title1" href="css1.css" />

※css1.cssの内容は以下の通りです。

body{
	background-color:#333;
	color:#FFF;
	font-size:18px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

css2.css：切替用cssファイル２

<link rel="alternate stylesheet" type="text/css" media="screen" title="title2" href="css2.css" />

※css2.cssの内容は以下の通りです。

body{
	background-color:#FF9;
	color:#09F;
	font-size:24px;
	margin:0;
	padding:0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:left;
}

styleswitch.jsを使って、読み込むスタイルシート（cssファイル）を切り替えるHTMLの記述

※aタグのhrefにchooseStyle(切り替えるlinkタグのtitle属性名, 30)でlinkタグに指定したtitle属性名を指定するとaタグクリックで切り替わります。

<div id="idWrap">
    <h1>下のリンクをクリックすると、読み込む（cssファイル）スタイルシートが切り替わります。</h1>
    
<ul>
<li><a href="javascript:chooseStyle('none', 30)">デフォルト</a></li>
<li><a href="javascript:chooseStyle('title1', 30)">スタイル１</a></li>
<li><a href="javascript:chooseStyle('title2', 30)">スタイル２</a></li>
</ul>
    
</div><!--/idWrap-->