ボタンクリックでフォントサイズと背景色を変えて状態を保持する

「jquery-1.11.3.min.js」と「jquery.cookie.js」を使用しています。

[サンプル](http://www.pc-weblog.com/sample/jis/)

##js

```qiita.js
$(function() {

    var key = "font";

    var data = localStorage.getItem(key);

    if (data == "large") {

        $("body").css("font-size", "120%");

        $("#font-size li.large").addClass("current");

    } else if (data == "middle") {

        $("body").css("font-size", "100%");

        $("#font-size li.middle").addClass("current");

    } else if (data == "small") {

        $("body").css("font-size", "80%");

        $("#font-size li.small").addClass("current");

    }

    $("#font-size li").click(function() {

        $("#font-size li").removeClass("current");

        var fontSize = $(this).attr("class");

        if (fontSize == "large") {

            data = "large";

            localStorage.setItem(key, data);

            $("body").css("font-size", "120%");

            $("#font-size li.large").addClass("current");

        } else if (fontSize == "middle") {

            data = "middle";

            localStorage.setItem(key, data);

            $("body").css("font-size", "100%");

            $("#font-size li.middle").addClass("current");

        } else {

            data = "small";

            localStorage.setItem(key, data);

            $("body").css("font-size", "80%");

            $("#font-size li.small").addClass("current");

        }

    });

    $("#color li").click(function() {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

        if ($.cookie("color_display")) {

            $.cookie("color_display", '', {


                expires: -1

            });

        } else {

            $.cookie("color_display", '1', {

                expires: 7

            });

        }

    });

    if ($.cookie("color_display")) {

        $("body").toggleClass("color");
        $("#color li").toggleClass("current");

    } else {


    }

});
```

##html

```qiita.html
<ul id="font-size">
    <li class="large"><a href="javascript:void(0);"><span>大</span></a></li>
    <li class="middle"><a href="javascript:void(0);"><span>中</span></a></li>
    <li class="small"><a href="javascript:void(0);"><span>小</span></a></li>
</ul>

<ul id="color">
    <li><a href="javascript:void(0);"><span>いろ</span></a></li>
</ul>

<p>
    テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
```

##css

```qiita.css
ul,li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

h1 {
    font-size: 160%;
}

p {
    font-size: 100%;
}

#font-size li,
#color li {
    position: relative;
    z-index: 3;
    margin-bottom: 10px;
}

#font-size li a,
#color li a {
    display: block;
}

#font-size li,
#font-size li a,
#color li,
#color li a {
    width: 50px;
    height: 33px;
}

#font-size li span,
#color li span {
    position: relative;
    z-index: -1;
}

#font-size li.large a {
    background: url("./btn_large.png") no-repeat;
}

#font-size li.large a:hover,
#font-size li.large.current a {
    background: url("./btn_large.png") no-repeat -50px 0;
}

#font-size li.middle a {
    background: url("./btn_middle.png") no-repeat;
}

#font-size li.middle a:hover,
#font-size li.middle.current a {
    background: url("./btn_middle.png") no-repeat -50px 0;
}

#font-size li.small a {
    background: url("./btn_small.png") no-repeat;
}

#font-size li.small a:hover,
#font-size li.small.current a {
    background: url("./btn_small.png") no-repeat -50px 0;
}

#color li a {
    background: url("./btn_color.png") no-repeat;
}

#color li a:hover,
#color li.current a {
    background: url("./btn_color.png") no-repeat -50px 0;
}

body.color {
    background: #000;
    background-color: #000;
}

body.color h1,
body.color p {
    color: #FFF !important;
}
```