概述：
通過(guò)點(diǎn)擊按鈕，為頁(yè)面切換不同的背景色罩息；
原理：
通過(guò)給link的href設(shè)置不同的值實(shí)現(xiàn)粉捻，皮膚的更換幌衣；
Code
JS
/*
* 點(diǎn)擊按鈕切換頁(yè)面的皮膚
* @param obj 按鈕組
* @param aSkin 皮膚組合
* @param oSkin 設(shè)置皮膚的link標(biāo)簽
*/
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);
};
效果
