小编给大家分享一下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; }
以上是“js如何实现网页换肤功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前标题:js如何实现网页换肤功能
网页网址:https://www.cdcxhl.com/article28/pjhjcp.html
成都网站建设公司_创新互联,为您提供面包屑导航、网站导航、电子商务、做网站、微信小程序、手机网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联