js简单实现网页换肤功能

2019-11-19 16:54:11

字体：大中小

来源：转载

供稿：网友

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

html

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title></title>    <link id="changelink" rel="stylesheet" href="css/default.css" rel="external nofollow" />  </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