今天给大家分享一下js如何实现网页换肤功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
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
body{ background: #ffffff; }
red.css
body{ background: #ff0000; }
green.css
body{ background: #008000; }