js換膚

//html
<div class="top ">
   <div id="skin" style="">
		 <ul>
		   <li>選擇頁面風格：</li>
		  <li><span id="blue_sp" class="on"><em id="sk_blue">默認風格</em></span></li>
		  <li><span id="gray_sp"><em id="sk_gray">夜間模式</em></span></li>
		  <li><span id="ching_sp"><em id="sk_ching">青綠模式</em></span></li>
		   <li><span id="Pink_sp"><em id="sk_Pink">粉紅模式</em></span></li>
		  </ul>
    </div>	 
</div>

//css
.header{height:88px;}
.top { width:890px; margin:0 auto; height:125px;/*background: url(../images/topbg.gif) repeat-x;*/ position:relative;}
#skin {height: 104px;width: 135px;color: #333;line-height: 25px;    background-color: #fff;border: 1px solid rgba(0,0,0,.15);border-radius: 4px;box-shadow: 0 6px 12px rgba(0,0,0,.175); position:absolute; right:116px;}
#skin li{ height:20px; line-height:20px; border-bottom:1px solid#e5e5e5; text-align:center;}
#skin .bor{border-right:1px solid #e9e8e5;padding-right:7px;margin-right:10px;}
#skin li span{cursor:pointer;display:block;}
#skin li span em{display:block;height:20px;width:100%;overflow:hidden;}
#skin a{color:#333;text-decoration:none;margin-right:5px;}
#skin li .on{cursor:default; background: url(../images/dui1.png) no-repeat center left 5px; }

.blue .top{background:#2086b3;}
.blue .footer{background:#2086b3;}
.blue a.selected{background:#137aa7;}
.blue .top li:hover{background:#137aa7;}
.gray .top{background: #668289;}
.gray .footer{background:#668289;}
.gray a.selected{background:#5d7479;}
.gray .top li:hover{background:#5d7479;}
.ching .top{background: #8cd9d2;}
.ching .footer{background:#8cd9d2;}
.ching a.selected{background:#78c1bb;}
.ching .top li:hover{background:#78c1bb;}
.Pink .top{background: #e781cd;}
.Pink .footer{background:#e781cd;}
.Pink a.selected{background:#cc73b5;}
.Pink .top li:hover{background:#cc73b5;}

<script type="text/javascript">

var skin=document.getElementById('skin');
var lis=skin.getElementsByTagName('li');//數組
var spans=skin.getElementsByTagName('span');//數組
var body=document.getElementsByTagName('body');//數組


for (var i = 0; i < spans.length; i++) {
	spans[i].onclick=function(){
		for (var j = 0; j < spans.length; j++) {
			spans[j].className='';
		}
		this.className='on';
		body[0].className=this.id.split('_')[0];
	}
	
}

</script>