js简单实现网页换肤功能

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

html

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link href="https://www.jb51.net/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 = "https://www.jb51.net/css/default.css"; }else{ csslink.href = "css/"+themevalue+".css"; } } </script> <button>默认</button> <button>红色</button> <button>绿色</button> </body> </html>

css文件

default.css

body{ background: #ffffff; }

red.css

body{ background: #ff0000; }

green.css

body{ background: #008000; }

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwywpw.html