zoukankan      html  css  js  c++  java
  • 简单实现网页换肤功能

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

    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>

    css文件

    default.css

    body{
        background: #ffffff;
    }

    red.css

    body{
        background: #ff0000;
    }

    green.css

    body{
        background: #008000;
    }

    PS:当然设置主题的参数也可以保存到后端(推荐),防止禁用cookies主题无法生效。

  • 相关阅读:
    C#之事件
    C#之委托
    CIC许可更新
    HMP许可更新
    知识库上传
    [转]spring中<tx:advice></tx:advice>意义
    [转]spring property标签中的 ref属性和ref 标签有什么不同
    [转] Spring@Autowired注解与自动装配
    [转]SpringMVC入门
    [转]SpringMVC拦截器详解[附带源码分析]
  • 原文地址:https://www.cnblogs.com/Sroot/p/6676674.html
Copyright © 2011-2022 走看看