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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
js简单实现交换Li的值
May 22 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
canvas绘制多边形
Feb 24 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
Sep 12 Javascript
javascript单张多张图无缝滚动实例代码
May 10 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 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
xml+php动态载入与分页
2006/10/09 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
PHP7新增函数
2021/03/09 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
ES6数组与对象的解构赋值详解
2019/06/14 Javascript
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python中DJANGO简单测试实例
2015/05/11 Python
详解Python中for循环是如何工作的
2017/06/30 Python
python删除服务器文件代码示例
2018/02/09 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
python利用opencv保存、播放视频
2020/11/02 Python
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
跟单文员的岗位职责
2013/11/14 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
食品安全检查制度
2014/02/03 职场文书
大学生就业自我推荐信
2014/05/10 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
世界地球日活动总结
2015/02/09 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js