A Simple jQuery Stylesheet Switcher

5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。
ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。

asahi.com の導入例


実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。
文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。


デモページ

HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。

<ul id="nav">
    <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li>
    <li><a href="#" rel="/path/to/style2.css">Larger Text</a></li>
    <li><a href="#" rel="/path/to/style3.css">Something Different</a></li>
</ul>

で、jQueryによって、クリックイベントを付与する。

$(document).ready(function() {
    $("#nav li a").click(function() {
        $("link").attr("href",$(this).attr('rel'));
        return false;
    });
});

これで、<link>のhrefが切り替えられ、見事CSSが切り替わるというものです。
更に、cookie に保存して次回アクセスにも対応する方法が以下

if($.cookie("css")) {
    $("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
    $("#nav li a").click(function() {
        $("link").attr("href",$(this).attr('rel'));
        $.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
        return false;
    });
});

実行には、jquery, jquery.cookie が必要ですが、以前に比べて、圧倒的なスピードで実現できるので、なんとなく面倒そうだから、と諦めていた人は実装してみるのもよいかも。