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 相关文章推荐
javascript cookie解码函数(兼容ff)
Mar 17 Javascript
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 Javascript
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
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
PHP简单检测网址是否能够正常打开的方法
2016/09/04 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
javascript中的window.location.search方法简介
2013/09/02 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python @property的用法及含义全面解析
2018/02/01 Python
python写一个md5解密器示例
2018/02/23 Python
Python常见工厂函数用法示例
2018/03/21 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
HTML5给汉字加拼音收起展开组件的实现代码
2020/04/08 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
班子四风对照检查材料
2014/08/21 职场文书
酒店保洁员岗位职责
2015/02/26 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
公司禁烟通知
2015/04/23 职场文书
社区敬老月活动总结
2015/05/07 职场文书
你真的会用Mysql的explain吗
2022/03/31 MySQL