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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
js获取提交的字符串的字节数
Feb 09 Javascript
对采用动态原型方式无法展示继承机制得思考
Dec 04 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
JavaScript实现的链表数据结构实例
Apr 02 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
简单实现node.js图片上传
Dec 18 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
php4的session功能评述(二)
2006/10/09 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
jQuery 相关控件的事件操作分解
2009/08/03 Javascript
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
jQuery EasyUI API 中文文档 - ComboTree组合树
2011/10/11 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[07:26]2015国际邀请赛第二日TOP10集锦
2015/08/06 DOTA
[01:13:08]2018DOTA2亚洲邀请赛4.6 淘汰赛 mineski vs LGD 第二场
2018/04/10 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python实现简单HTML表格解析的方法
2015/06/15 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
selenium+python实现自动化登录的方法
2018/09/04 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
介绍一下你对SOA的认识
2016/04/24 面试题
单位领导证婚词
2014/01/14 职场文书
挂牌仪式主持词
2014/03/20 职场文书
倡议书的格式写法
2015/04/28 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
文艺部部长竞选稿
2015/11/21 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书