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 相关文章推荐
js有关元素内容操作小结
Dec 20 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
分析JS中this引发的bug
Dec 12 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
Sep 04 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
JavaScript实现点击切换功能
Jan 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中使用sockets:从新闻组中获取文章
2006/10/09 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
网页加载时页面显示进度条加载完成之后显示网页内容
2012/12/23 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
JavaScript数据类型检测代码分享
2015/01/26 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
js模态对话框使用方法详解
2017/02/16 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
详解在React-Native中持久化redux数据
2019/05/22 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
JS使用setInterval计时器实现挑战10秒
2020/11/08 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python实现子类调用父类的方法
2014/11/10 Python
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Python中自定义函数的教程
2015/04/27 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python上传时包含boundary时的解决方法
2020/04/08 Python
tensorflow2.0教程之Keras快速入门
2021/02/20 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
PHP高级工程师面试问题推荐
2013/01/18 面试题
幼儿园三八妇女节活动方案
2014/03/11 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
法律意见书范本
2015/06/04 职场文书