styleswitch.js:読み込む(cssファイル)スタイルシートを切り替える



複数用意した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>

読み込む(cssファイル)スタイルシートを切り替えるデモページ

ソース元:Dynamic Drive DHTML Scripts- Style Sheet Switcher (v1.1)

ページ全体のcssを切り替えることは無いですが、
ページの文字サイズを切り替えることはたまにあります。
でも、またそれ用のjsがありますよね。