*超简单的js、jq皮肤切换，一看就会，不会打我

最新推荐文章于 2021-09-08 16:28:21 发布

杨西瓜

最新推荐文章于 2021-09-08 16:28:21 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签： jq换肤 h5的localStorage存储换肤的值

本文链接：https://blog.csdn.net/qq_33862644/article/details/78689684

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

之前考虑用cookie做。后一想用户如果给cookie禁止咯怎么办呢？

想了想还是用h5的localStorage做吧！！

先上效果图：

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq</title>
    <link id="bg" rel="stylesheet" type="text/css" href="skin_css/skin_red.css"/><!--默认红色-->
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="index.js"></script>
</head>
<body>
<input type="button" name="" id="red" value="红色" />
<input type="button" name="" id="blue" value="蓝色" />
<input type="button" name="" id="green" value="绿色" />
</body>
</html>

js代码：

$(function(){
    var oBg = $("#bg");                //css链接的id
    var skin = 'skin';                //localStorage的key
    svalue = localStorage.getItem(skin);


    //如果有localStorage中有数据就用localStorage中的数据
    if(svalue){
        oBg.attr('href',"skin_css/skin_"+svalue+".css");
    }
    $("#red").click(function(){
        skin_value = $(this).attr("id"); //red
        localStorage.setItem(skin,skin_value);       //存到数据库
        oBg.attr('href',"skin_css/skin_"+skin_value+".css");
    });

    $("#blue").click(function(){
        skin_value = $(this).attr("id"); //blue
        localStorage.setItem(skin,skin_value);       //存到数据库
        oBg.attr('href',"skin_css/skin_"+skin_value+".css");
    });

    $("#green").click(function(){
        skin_value = $(this).attr("id"); //green
        localStorage.setItem(skin,skin_value);       //存到数据库
        oBg.attr('href',"skin_css/skin_"+skin_value+".css");
    });

});

css代码：自己复制3份，放在3个不同的文件中

*{
    padding:0;
    margin: 0;
}

body{
    background-color: green;
}

点此下载源码

杨西瓜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录