分享好友 教程首页 教程搜索 频道列表

前端用js实现网页换肤功能

2022-09-10 13:472930
+关注29
核心提示:今天给大家分享一下js如何实现网页换肤功能,相信大部分人都还不怎么了解,因此分...

今天给大家分享一下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;
}



本文标签: #颜色 #主题 #切换 #背景
免责声明:凡注明来源本网的所有作品,均为本网合法拥有版权或有权使用的作品,欢迎转载,注明出处。非本网作品均来自互联网,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。
生成海报
您可能在找更多

推荐主站色值之二,可参考

小黑 web前端开发2021-12-22

推荐主站色值,可参考

小黑 web前端开发2021-12-22

css3 placeholder字体颜色大小

    一、须知placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。二、设置placeholder文字颜色、字号方式1:因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独

小黑 CSS相关2021-06-23

轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能。。。实例代码form action="demo_form.asp" method="get"input type="search" name="user_search" placeholder="我是提示文字 在此输入文本我会消失" /input type=&q

xiaohei web前端开发2018-12-10

几个实用的php生成随机颜色函数

    php 生成随机颜色1function rand_color(){$str='0123456789ABCDEF';$estr='#'; $len=strlen($str);for($i=1;$i=6;$i++){$num=rand(0,$len-1);$estr=$estr.$str[$num]; }return $estr;}2function mbw_color(){$s = '#';$c = array('26a2b6'

小黑 网页特效2017-07-27

下一篇
我来说两句
抢沙发