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

来源:互联网 发布:js newdate 编辑:程序博客网 时间:2024/05/29 11:53
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <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>
0 0
原创粉丝点击