当前位置: 首页 > 编程笔记 >

js简单实现网页换肤功能

邬良才
2023-03-14
本文向大家介绍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;
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍asp.net简单实现页面换肤的方法,包括了asp.net简单实现页面换肤的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了asp.net简单实现页面换肤的方法。分享给大家供大家参考,具体如下: 这里实现页面换肤效果,可以 给html form 添加相应的样式 代码如下: 希望本文所述对大家asp.net程序设计有所帮助。

  • 本文向大家介绍js实现简单锁屏功能实例,包括了js实现简单锁屏功能实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js实现简单锁屏功能的方法。分享给大家供大家参考。具体实现方法如下: 如果大家不知道什么是锁屏,可以去163信箱看一看,用途是你要离开屏幕一段时间时可以暂时锁住屏幕保留工作空间。带回来只要重新输入密码验证即可恢复到原先的工作空间。 一般都是通过在页面上增加不透明遮罩层实现锁

  • 本文向大家介绍简单实现js倒计时功能,包括了简单实现js倒计时功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js倒计时的具体代码,主要使用了JS的Date对象和定时器setInterval,供大家参考,具体内容如下 更多关于倒计时的文章请查看专题:《倒计时功能》 更多JavaScript时钟特效点击查看:JavaScript时钟特效专题 以上就是本文的全部内容,希望对大家的学习

  • 本文向大家介绍简单实现js上传文件功能,包括了简单实现js上传文件功能的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现上传文件功能的具体代码,供大家参考,具体内容如下 一、用input完成上传,效果图如        选择文件后,提交后出现图片url 二、传输格式采用form-data形式。 html代码  js部分 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大

  • 本文向大家介绍js实现分页功能,包括了js实现分页功能的使用技巧和注意事项,需要的朋友参考一下 本文仅为自己记录下编写过程,如有兴趣,或者疑问,请与我联系。 写前背景:java开发工作经验一年,现项目为SSM框架,使用maven管理项目。需要页面查询实现分页,网上找了很多插件,单独页面实现是好的,可是放到我的页面就没有效果,苦于自己也找不到原因,故写以下代码,很是粗糙,不过懒得整理成js文件了。

  • 本文向大家介绍Java简单高效实现分页功能,包括了Java简单高效实现分页功能的使用技巧和注意事项,需要的朋友参考一下 今天想说的就是能够在我们操作数据库的时候更简单的更高效的实现,现成的CRUD接口直接调用,方便快捷,不用再写复杂的sql,带吗简单易懂,话不多说上方法 1、Utils.java工具类中的方法 2、实现类 这里查询相关参数是前端传的,所以用默认值了,查询条件可以是多条件动态,排序也