js切换页面文字大小和背景颜色


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script type="text/javascript" src="http://f3.v.veimg.cn//xz/answer/js/jquery-1.9.1.min.js">script>
    <script type="text/javascript">
        $(function () {
            function getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg))
                    return unescape(arr[2]);
                else
                    return null;
            }
            function setCookie(name, value) {
                var Days = 30;
                var exp = new Date();
                exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
                document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
            }
            var cookie_color_name="bg_color";
            var cookie_color_value=getCookie(cookie_color_name);
            console.log("颜色:"+cookie_color_value);
            if(cookie_color_value!=null) {
                $("#pText").css("background-color", cookie_color_value);
            }
            $("#btnRed").click(function () {
                $("#pText").css("background-color", "red");
                setCookie(cookie_color_name,"red");
            });
            $("#btnYellow").click(function () {
                $("#pText").css("background-color", "yellow");
                setCookie(cookie_color_name,"yellow");
            });
            var co_font="font_size";
            var co_value_size=getCookie(co_font);
            console.log("字体:"+co_value_size);
            if(co_value_size!=null) {
                $("#pText").css("font-size",co_value_size);
            }
            $("#btnAdd").click(function () {
                $("#pText").css("font-size", "20px");
                setCookie(co_font,"20px");
            });
        });
    script>
head>
<body>
<div id="pText">
<p>阿士大夫撒打发第三方p>
<p>数量达会计法拉克水电费拉速度快放假萨洛克打飞机到拉萨房间卡士大夫吉林省大开发p>
div>
<input id="btnSub" type="button" value="字体变小"/>
<input id="btnAdd" type="button" value="字体变大"/>
<input id="btnRed" type="button" value="改变颜色-红色"/>
<input id="btnYellow" type="button" value="改变颜色-黄色"/>
body>
html>

你可能感兴趣的:(web前端开发,js相关)