概述：
通过点击按钮，为页面切换不同的背景色；
原理：
通过给link的href设置不同的值实现，皮肤的更换；
Code
JS
/*
* 点击按钮切换页面的皮肤
* @param obj 按钮组
* @param aSkin 皮肤组合
* @param oSkin 设置皮肤的link标签
*/
functionchangeSkin(obj,aSkin,oSkin) {
for(var i =0;i < obj.length;i++) {
obj[i].index= i;
obj[i].onclick=function() {
var_this =this;
for(var j in aSkin) {
obj[j].className='';
}
_this.classList.add('active');
oSkin.setAttribute('href',aSkin[_this.index]);
};
}
}
案例
HTML
<link rel="stylesheet" href="../CSS/skin1.css" id="skin1">
<div class="list">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
CSS
body,div{padding:0;margin:0;}
.list{width:300px;margin:30px auto;}
.list a{position:relative;display:inline-block;list-style:none outside none;text-decoration:none;width:20px;height:20px;margin-right:10px;}
a:nth-child(1) {background:palevioletred;}
a:nth-child(2) {background-color:lightblue;}
a:nth-child(3) {background-color:bisque;}
a:nth-child(4) {background-color:brown;}
.list a.active:before{content:'';position:absolute;top:4px;left:4px;width:12px;height:12px;background-color:#fff;z-index:10;}
JS
window.onload=function() {
var oSkin =document.getElementById('skin');
var aLink =document.getElementsByTagName('a');
var skin = ['../CSS/skin1.css','../CSS/skin2.css','../CSS/skin3.css','../CSS/skin4.css'];
changeSkin(aLink,skin,oSkin);
};
效果
