js簡(jiǎn)單實(shí)現(xiàn)網(wǎng)頁(yè)換膚功能

2019-11-19 16:54:11

字體：大中小

供稿：網(wǎng)友

我發(fā)現(xiàn)網(wǎng)上寫換膚功能寫的有點(diǎn)長(zhǎng)，就想想如何更簡(jiǎn)單方法實(shí)現(xiàn)這個(gè)功能，于是我自己寫了一個(gè)。

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')">默認(rèn)</button>    <button onclick="changetheme('red')">紅色</button>    <button onclick="changetheme('green')">綠色</button>  </body></html>

css文件

default.css