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

文字サイズ「大・中・小」としているサイトが見受けられます。
これを手軽に導入するためjQueryプラグインのjStylerを使用してみてはいかがでしょうか。
JavaScriptでCSSを切り替える: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」サンプル

sponsors

「JavaScriptでCSSを切り替える:jQueryプラグイン「jStyler」」をシェアする

記事作成:
記事URL:

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