js简单实现网页换肤功能


Posted in Javascript onApril 07, 2017

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

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主题无法生效。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery垂直公告滚动实现代码
Dec 08 Javascript
JS简单模拟触发按钮点击功能的方法
Nov 30 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
vue+element实现打印页面功能
May 20 Javascript
对Layer UI 模块化的用法详解
Sep 26 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 #Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
Apr 07 #Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 #Javascript
JavaScript函数节流的两种写法
Apr 07 #Javascript
原生JS实现圆环拖拽效果
Apr 07 #Javascript
Zepto实现密码的隐藏/显示
Apr 07 #Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 #Javascript
You might like
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
刷新时清空文本框内容的js代码
2007/04/23 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
js实现简单选项卡制作
2020/08/05 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
Python 面向对象之类class和对象基本用法示例
2020/02/02 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
python编程的核心知识点总结
2021/02/08 Python
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Servlet如何得到服务器的信息
2015/12/22 面试题
经销商年会策划方案
2014/05/29 职场文书
2014年度党员自我评议
2014/09/13 职场文书
民事和解协议书格式
2014/11/29 职场文书
南京导游词
2015/02/03 职场文书
同事去世追悼词
2015/06/23 职场文书
高中运动会前导词
2015/07/20 职场文书
个人工作决心书
2015/09/22 职场文书
Mysql存储过程、触发器、事件调度器使用入门指南
2022/01/22 MySQL
python游戏开发Pygame框架
2022/04/22 Python