jQueryでフォントサイズのスタイルシートを動的に切り替えて、現在表示しているスタイルシートをクッキーに保存する方法です。
スタイルシートは、あらかじめフォントのサイズごとに3種類用意しておきます。

1
2
3
font-small.css
font-default.css
font-large.css

次のコードでは、ページ内にレイアウト用など複数のスタイルシートを読み込むことを想定して、フォントサイズ用のスタイルシートのみを切り替えています。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function() {
 
	//フォントサイズ用のCSSファイル名
	var css_default = "font-default.css";
 
	//クッキーから読み込んで、現在のCSSファイルを設定
	var css_current = ($.cookie("css")) ? $.cookie("css") : css_default;
 
	//フォントサイズ用CSSのリンク
	var link = $("link[href="+css_default+"]");
 
	//リンクのhref属性に現在のCSSファイルを読み込み
	link.attr("href", css_current);
 
	//クリックされたサイズに変更して、クッキーに書き込み
	$("ul#font-size li").click(function() {
    	css_current = "font-"+$(this).attr("class")+".css";
		link.attr("href", css_current);
        $.cookie("css", css_current, {expires:1});
    });
});

<head>タグ内にjQueryの本体と、「jquery.cookie.js」を読み込みます。

1
2
3
4
<link href="base.css" rel="stylesheet" type="text/css" media="all" />
<link href="font-default.css" rel="stylesheet" type="text/css" media="all" />
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>

フォント切り替えのためのボタンを、ページ内に<li>で記述します。
クラス名が、スタイルシートのファイル名に関連しています。

1
2
3
4
5
<ul id="font-size">
<li class="small">small</li>
<li class="default">default</li>
<li class="large">large</li>
</ul>