JS实现换肤功能的方法实例详解


Posted in Javascript onJanuary 30, 2019

本文实例讲述了JS实现换肤功能的方法。分享给大家供大家参考,具体如下:

首先准备HTML页面如下:

<div id="container">
<div id="header">
  <h3>无人驾驶要征服世界,得先解决这些问题</h3>
</div>
<div id="nav">
<input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
<input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />
</div>
<div id="content">
  <h3>  一、触手可及的伟大野心</h3>
  <p>除了统治世界,无人驾驶大概可以和历史上所有野心匹敌。万亿美金的全球汽车市场也只是无人驾驶的第一个目标,反向控制用户以汽车为中心的一系列生活和工作才是无人驾驶汽车的长远目标。</p>
  <p>想象一下,把无人驾驶汽车作为超级终端连接用户在驾驶沿途和目的地发生的全部旅游、娱乐、订餐、住宿、购物和其它消费,甚至判断用户需要租房购房时把地段介绍、楼盘、行情、推荐、点评、价值分析一并提供。你只要对驾驶台屏幕上的小秘书说一声OK,就有电商堆着笑脸连线服务,这样巨大的商业想象空间是任何一家企业无法抗拒的。
</p>
<p>无人驾驶的伟大之处在于改变的远不止汽车制造业和出租车服务业,而是创造了以无人汽车为中心的新经济和前所未有的生活模式与社会观念。中国工程学院李德毅院士希望智能汽车成为2015年中国智能制造的首张名片,是学术界对产业的洞见。在无限前景召唤下,世界级IT和汽车业巨头几乎抱团涌入无人驾驶市场。Google和百度在无人驾驶各自深耘多年,苹果造车的传言随时可能跃上头条,马斯克(Musk)当然不会错过让特斯拉造出超级无人驾驶车的机会,宝马、奔驰、大众、奥迪、沃尔沃、本田、比亚迪等中外品牌也纷纷投入其中,前不久知名数据专家吴甘沙也抵不住诱惑从英特尔离职投身智能驾驶。</p>
</div>
<div id="footer">
  Copyright ? 2015-2016, joshua, All Rights Reserved
</div>
</div>

然后为网站准备两个css样式文件blue.css 和green.css文件:

blue.css

body{
  margin: 0px;
  padding: 0px;
}
#header{
  padding: 10px;
  background-color: skyblue;
  color: black;
  font-family: arial;
  text-align: center;
  font-weight: bold;
}
h3{
  font-size:20px;
  width:800px;
  margin: 0 auto;
}
#content{
  width: 90%;
  margin: 0 auto;
  font-size: 12px;
  padding: 10px;
  background-color: cadetblue;
  line-height: 200%;
  text-indent:2em;
}
#nav{
  text-align: center;
  margin: 0 auto;
  padding: 10px 0px;
  background-color: skyblue;
}
#footer{
  position: relative;
  bottom: 20px;
  margin-top: 30px;
  background-color: gray;
  text-align: center;
}
input{
  font-size: 12px;
  border-radius: 5px;
  background-color: skyblue;
}
input.blue{
  background-color: skyblue;
}
input.green{
  background-color: greenyellow;
}
input#blue{
  background-color: skyblue;
}

green.css:

body,html{
  margin: 0px;
  padding: 0px;
  height: 100%
}
#container{
  height: 100%;
  position: relative;
}
#header{
  padding: 10px;
  background-color: greenyellow;
  float:left;
  width: 20%;
  height:100%;
  text-align: center;
   box-sizing: border-box;
}
#content{
  font-size: 12px;
  padding: 10px;
  line-height: 180%;
  width: 80%;
  height: 100%;
  text-indent: 2em;
  background-color: slategray;
  box-sizing: border-box;
}
.nav{
   position: absolute;
   top: 50px;
   width: 150px;
 }
#footer{
  position: relative;
  top: 20px;
  margin-top: 30px;
  background-color: gray;
  text-align: center;
}
input{
  border-radius: 5px;
}
input.blue{
  background-color: skyblue;
}
input.green{
  background-color: greenyellow;
}

然后在网页开头引入css文件

<link rel="stylesheet" href="css/green.css" rel="external nofollow" id="cssfile"/>

然后用js实现换肤:

function changeSyle(name){
  css=document.getElementById("cssfile");
  css.href=name+".css";
  document.styleSheets[0].href=name+".css";
  console.log(css.href);
  console.log("name="+name);
  console.log(name);
}

最后定义两个按钮调用js换行

<input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
<input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />

最终效果如下:

JS实现换肤功能的方法实例详解

JS实现换肤功能的方法实例详解

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery的trigger和triggerHandler的区别示例介绍
Apr 20 Javascript
javascript监听鼠标滚轮事件浅析
Jun 05 Javascript
jquery中show()、hide()和toggle()用法实例
Jan 15 Javascript
全面理解闭包机制
Jul 11 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 Javascript
JavaScript中的编码和解码函数
Feb 15 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
jQuery实现简单评论区功能
Oct 26 jQuery
js实现ATM机存取款功能
Oct 27 #Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 #Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 #Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 #Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 #Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 #Javascript
You might like
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
php实现微信支付之企业付款
2018/05/30 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
javascript中数组的concat()方法使用介绍
2013/12/18 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
vue axios用法教程详解
2017/07/23 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
vue生命周期和react生命周期对比【推荐】
2018/09/19 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
Python中使用MELIAE分析程序内存占用实例
2015/02/18 Python
简析Python的闭包和装饰器
2016/02/26 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python中numpy的矩阵、多维数组的用法
2018/02/05 Python
Pytorch 实现sobel算子的卷积操作详解
2020/01/10 Python
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
事业单位辞职信范文
2014/01/19 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
员工晚婚的请假条
2014/02/08 职场文书
中职生求职信
2014/07/01 职场文书
青春励志演讲稿范文
2014/08/25 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
swagger如何返回map字段注释
2021/07/03 Java/Android
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
AJAX实现省市县三级联动效果
2021/10/16 Javascript