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

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

サンプル

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;
}