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 常见学习网站与参考书
Nov 09 Javascript
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
JS实现距离上次刷新已过多少秒示例
May 23 Javascript
详解JavaScript正则表达式之分组匹配及反向引用
Mar 09 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue--vuex详解
Apr 15 Javascript
node.js ws模块搭建websocket服务端的方法示例
Apr 25 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
js绘制一条直线并旋转45度
Aug 21 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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 正则表达式小结
2009/08/31 PHP
php筛选不存在的图片资源
2015/04/28 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php curl常用的5个经典例子
2017/01/20 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP实现小程序批量通知推送
2018/11/27 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JS动态改变表格边框宽度的方法
2015/03/31 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
python中base64加密解密方法实例分析
2015/05/16 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
python numpy库linspace相同间隔采样的实现
2020/02/25 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
物理系毕业生自荐书范文
2014/02/22 职场文书
优秀教师推荐材料
2014/12/16 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android