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

<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>

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;
}

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;
}

<link rel="stylesheet" href="css/green.css" rel="external nofollow" id="cssfile"/>

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);
}

<input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle('blue');" />
<input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle('green');" />