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; }
PS:当然设置主题的参数也可以保存到后端(推荐),防止禁用cookies主题无法生效。
相关推荐
VitaLemon 2020-10-17
北京老苏 2020-08-17
一像素 2020-08-16
yfisaboy 2020-07-28
preserve log:勾选,页面发生跳转,接口不丢失;;Disable cache:不使用缓存,勾选,拿服务器的缓存;不勾选,用本地缓存;;All那列,表示浏览器的请求类型,对应下面的列type;
baynkbtg 2020-07-05
dingqinghu 2020-06-16
deadgrape 2020-06-09
liujia 2020-06-02
牵手白首 2020-06-02
kikaylee 2020-05-31
MaureenChen 2020-05-25
delmarks 2020-05-17
王磊的程序员之路 2020-05-15
STPace 2020-05-07
singer 2020-05-07
e度空间 2020-04-30
furongwei 2020-04-25