skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

JavaScriptでCSSを切り替える：jQueryプラグイン「jStyler」

｜ ｜ ｜ ｜ ｜ ｜ ｜

文字サイズ「大・中・小」としているサイトが見受けられます。
これを手軽に導入するためjQueryプラグインのjStylerを使用してみてはいかがでしょうか。

使用方法
jStylerからjquery.cookie.jsとswitcher.jsを、jQueryからjquery.jsをダウロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="switcher.js"></script>
<link rel="stylesheet" type="text/css" href="a.css" title="A" media="screen" />
//ベース CSS A
<link rel="alternate stylesheet" type="text/css" href="b.css" title="B" media="screen" />
//切り替え用CSS B
<link rel="alternate stylesheet" type="text/css" href="c.css" title="C" media="screen" />
//切り替え用CSS C
<script>
$(document).ready(function(){
$('#id名').switcher();
});
</script>

あとは指定したid内に切り替え用のリンクを記述すれば完成です。
<ul id="switcher">
<li><a href="#A">CSS A</a></li>
//#Aは上記で指定したtitleと同一にします
<li><a href="#B">CSS B</a></li>
<li><a href="#C">CSS C</a></li>
</ul>

JavaScriptでCSSを切り替える：jQueryプラグイン「jStyler」サンプル

記事作成：2009年03月28日

前の記事：驚きの画像切り替え！jQueryプラグイン「Jquery.ImageSwitch」
次の記事：【お知らせ】.htaccessを変更し直リンクを禁止します