jQueryとjquery.cookie.jsプラグインでCSSを変更する方法

CSSをjQueryで変更する方法を調べたので、サンプルソースと共に忘れないようにメモしておきます。

CSSの変更がページ移動後も反映されるようにする為には、Cookieを使用するのが一般的だと思います。ただ、プログラムを得意としない人(僕)にとって、Cookieの操作ってちょっとややこしそう。そんな人でもCookieを簡単に利用できるようにするのがjquery.cookie.jsプラグインです。

jQueryとjquery.cookie.jsを使用したら、結構簡単に実現できました。

通常表示用のCSSファイル(style1.css)と変更したいCSSファイル(style2.css)を用意して、HTMLファイルに以下のような記述を追加するだけです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="./style1.css" />
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./jquery.cookie.js"></script>
    <script type="text/javascript">
      $(function(){
        $('body').
          prepend(
            '<ul id="styles">'
            +'<li><a href="./style1.css">style1</a></li>'
            +'<li><a href="./style2.css">style2</a></li>'
            +'</ul>'
          ).
          find('#styles a').
            click(function(){
              var url = $(this).attr('href');
              $('link[rel="stylesheet"]').attr({href: url});
              $.cookie('style', url, {expires: 30});
              return false;
            }).
          end();
        if($.cookie('style')) $('link[rel="stylesheet"]').attr({href: $.cookie('style')});
      });
    </script>
  </head>
  <body>
  </body>
</html>

仕組みは、まず、body要素の最初(prepend)にCSSファイルのリスト(#styles)を表示させます。リスト内のa要素がクリックされると、そのa要素のhref属性値(url)がlink要素のhref属性値に適用されます。この時点でCSSファイルが変更されたことになります。

link要素のhref属性値に新しい値が適用されると、styleというCookie名でurlが保存されます。{expires: 30}という部分がありますが、これはCookieの保存日数です。

最後にif文でstyleというCookie名が存在するか確認して、存在するなら、その値であるurlがlink要素のhref属性に適用されます。

これで、CSSファイルの変更とページ移動後もCSSファイルの変更が反映されるページの完成です。