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

本文实例讲述了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');" />

最终效果如下:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

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

(0)

相关推荐

  • AngularJS实现网站换肤实例

    网站不应该只注重功能,还应该注重用户体验:成熟的大型网站大都具备让用户自行选择主题及颜色的功能,AngularJS也可以做到这点. 效果图: 原理是使用ng-href来动态为网页更换样式: <link rel="stylesheet" type="text/css" ng-href="{{theme.value}}.css"> 代码: <!DOCTYPE html> <html ng-app="app&qu

  • js简单实现网页换肤功能

    我发现网上写换肤功能写的有点长,就想想如何更简单方法实现这个功能,于是我自己写了一个. html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link id="changelink" rel="stylesheet" href="css/default.css&

  • 换肤测试程序js脚本

    换肤测试程序 .themes{border:1px solid #000;} ","http://www.east-dragon.cn/code/changeskin/css/ocean.css"], ["","http://www.east-dragon.cn/code/changeskin/css/tangerine.css"], ["","http://www.east-dragon.cn/code/

  • js实现简单的网页换肤效果

    中心思想:网页换肤的原理就是通过调用不同的样式表文件来实现不同的皮肤切换,并且需要将换好的皮肤计入Cookie中,这样用户已下次访问时,就可以显示用户自定义皮肤了 步骤: 1.在设计HTML代码时,用了一些小技巧,就是将皮肤选择按钮<li>元素的id与网页皮肤的样式文件名称设置的相同.这样就可以使完成换肤操作简化很多. 2.HTML结构要有一个带id的样式表链接,通过操作该链接的herf属性的值,从而实现换肤 <link rel="stylesheet" href=&

  • JavaScript实现换肤功能

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

  • js Dom实现换肤效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>换肤</title> <link rel="stylesheet" href="base.css"> <link

  • jQuery结合jQuery.cookie.js插件实现换肤功能示例

    本文实例讲述了jQuery结合jQuery.cookie.js插件实现换肤功能.分享给大家供大家参考,具体如下: 上一次和大家分享了如何实现换肤功能,但是script代码好像有点长,所以这次打算使用cookie.js插件来实现换肤功能,好啦,我们开始吧. jQuery.cookie.js下载:https://github.com/carhartl/jquery-cookie/ 先来了解下cookie.js如何使用. 先导入: <script type="text/javascript&qu

  • js+css简单实现网页换肤效果

    本文实例讲述了js+css简单实现网页换肤效果.分享给大家供大家参考,具体如下: 这里做了3套外观,分别使用不同文件夹下的同名css文件,那么怎样实现js替换加载呢? 3个按钮如下: <a id="skin1" href="javascript:void(0)" class="easyui-linkbutton" onclick="changeCss('default')">蓝色皮肤</a><br

  • javascript实现动态CSS换肤技术的脚本

    <SCRIPT LANGUAGE=javascript>     <!--     function SetCookie(name,value){         var argv=SetCookie.arguments;         var argc=SetCookie.arguments.length;         var expires=(2<argc)?argv[2]:null;         var path=(3<argc)?argv[3]:null; 

  • Javascript结合css实现网页换肤功能

    Html代码部分: 1.要有一个带id的样式表链接,我们要通过操作这个链接来调用不同的href. <link href="css/main0.css" rel="stylesheet" type="text/css" id="cssfile" /> 2.皮肤选择按钮(后台为每个li添加onclick事件,触发换肤功能) <ul id="skin"> <li id="s

  • js动态修改整个页面样式达到换肤效果

    jsPro1\js动态修改整个html页面样式(换肤).html 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>动态修改页面样式

随机推荐