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 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
javascript表格的渲染组件
Jul 03 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JavaScript中数组slice和splice的对比小结
Sep 22 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 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
老照片 - 几十年前的收音机与人
2021/03/02 无线电
PHP数组和explode函数示例总结
2015/05/08 PHP
解决ThinkPHP下使用上传插件Uploadify浏览器firefox报302错误的方法
2015/12/18 PHP
php利用header函数下载各种文件
2016/08/24 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
javascript一些不错的函数脚本代码
2008/09/10 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
谈一谈bootstrap响应式布局
2016/05/23 Javascript
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
详解easyui 切换主题皮肤
2019/04/04 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python读取xlsx文件的实现方法
2019/07/04 Python
python numpy中cumsum的用法详解
2019/10/17 Python
python GUI库图形界面开发之PyQt5滚动条控件QScrollBar详细使用方法与实例
2020/03/06 Python
室内设计专业个人的自我评价
2013/12/18 职场文书
爱我中华演讲稿
2014/05/20 职场文书
最常使用的求职信
2014/05/25 职场文书
钳工实训报告总结
2014/11/04 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
写给老婆的保证书
2015/02/27 职场文书
公司更名通知函
2015/04/24 职场文书
python实现三次密码验证的示例
2021/04/29 Python
Pygame Draw绘图函数的具体使用
2021/11/17 Python
python处理json数据文件
2022/04/11 Python