简单实现网页换肤功能

最新推荐文章于 2024-09-22 13:54:07 发布

weixin_30695195

最新推荐文章于 2024-09-22 13:54:07 发布

阅读量355

点赞数

文章标签：后端

原文链接：http://www.cnblogs.com/Sroot/p/6676674.html

版权

我发现网上写换肤功能写的有点长，就想想如何更简单方法实现这个功能，于是我自己写了一个。

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link id="changelink" rel="stylesheet" href="css/default.css" />
    </head>
    <body>
        <script>
            
            var csslink = document.getElementById("changelink");
            
            //初始化主题
            loadtheme();
            
            function changetheme(color){
                csslink.href = "css/"+color+".css";
                //保存主题到cookies
                document.cookie="theme="+color;
            }
            
            function loadtheme(){
                //从cookies读取主题
                var themevalue=document.cookie.split(";")[0].split("=")[1];
                if(themevalue==null){
                    csslink.href = "css/default.css";
                }else{
                    csslink.href = "css/"+themevalue+".css";
                }
            }
            
        </script>
        <button  onclick="changetheme('default')">默认</button>
        <button  onclick="changetheme('red')">红色</button>
        <button  onclick="changetheme('green')">绿色</button>
    </body>
</html>