【JS】用JS实现带cookies保存记录的换肤功能

由于项目需要研究了一下换肤功能，代码简洁易懂，首先需要根据自己的皮肤主题提前把自己所写的样式放在对应名字的css文件里，然后将选择主题的点击事件保存在cookies记录里，读取cookies记录，如果记录不为空则根据记录设置皮肤，不然选择默认皮肤。
1. HTML代码

   <link rel="stylesheet" href="CSS/themes/red.css" id="themeFile"/>
 <style>
        .content{
            height:300px;
            width: 300px;
            margin-top: 20px;
            color: #fff;
            text-align: center;
        }
        .themeBtn{
            background: #f5f5f5;
            padding: 5px;
            border:1px solid #aaa4a4;
            -webkit-border-radius:5px;
            -moz-border-radius:5px;
            border-radius:5px;
        }
    </style>
 <div class="selectSkin">
<!--注意这时候的id要去css文件名一致-->
    <input id="red"  class="themeBtn" type="button" value="红色">
    <input id="yellow" class="themeBtn" type="button" value="黄色">
    <input id="green" class="themeBtn" type="button" value="绿色">
</div>
<div class="content">换肤换肤换肤换肤换肤换肤换肤</div>`

2. 三个css文件
(1)red.css
.content{background:red}
(2)yellow.css
.content{background:yellow}
(2)green.css
.content{background:green}
这时候要注意上次引用的css文件，给head里的添加一个id=“themeFile”;

**3. JS代码**

function saveCookie(name, value) { //存储cookies
var Days =1; //此 cookie 将被保存 1 天
var exp = new Date(); //new Date
exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
document.cookie = name + “=” + escape(value) + “;expires=” + exp.toGMTString()+";path=/";
}

function getCookie(name){ //读取cookies函数
var arr = document.cookie.match(new RegExp("(^| )" + name + “=([^;]*)(;|$)”));
if (arr != null) return unescape(arr[2]); return null;
}

function changeThemes(){ //换肤
var stylesheet=document.getElementById(‘themeFile’);
$(".selectSkin").find(“input”).click(function () {
var Id = $(this).attr(‘id’); //找到input的ID
stylesheet.href=‘CSS/themes/’+Id+’.css’; //更换link引用的css文件地址
saveCookie(“Id”,Id); //将点击事件存放在浏览器的cookie记录里
});
var themeId=getCookie(‘Id’);//读取cookies记录
if(themeId!=null){ //判断cookies记录是否存在
stylesheet.href=‘CSS/themes/’+themeId+’.css’; //若存在就选择用户点击的主题
}else{
stylesheet.href=‘CSS/themes/red.css’;//不存在就默认为红色
}
}

 最后效果如下

![这里写图片描述](https://img-blog.csdn.net/20170901174943829?)

![这里写图片描述](https://img-blog.csdn.net/20170901174902500)

![这里写图片描述](https://img-blog.csdn.net/20170901175003702?)