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的多个选择器的使用示例
Oct 18 Javascript
jQuery实现平滑滚动到指定锚点的方法
Mar 20 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
动态加载js、css的实例代码
May 26 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
人族 Terran 基本策略
2020/03/14 星际争霸
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python 使用PyQt5 完成选择文件或目录的对话框方法
2019/06/27 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
类的核心特性有哪些
2014/01/01 面试题
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
运动会广播稿500字
2014/01/28 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
葬礼司仪主持词
2014/03/31 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
社区戒毒工作方案
2014/06/04 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL