select學習小demo--實現網頁換膚-創新互聯

一，簡單版

創新互聯建站自2013年起，先為易門等服務建站，易門等地企業，進行企業商務咨詢服務。為易門企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

<body>
<header>
     <img src="img/2.jpg" alt="" >
     <select id="btn">
	<option value="">請選擇</option>
        <option>背景春</option> 
        <option>背景夏</option>
        <option>背景秋</option>
        <option>背景冬</option>
    </select>
    <select id="btn1">
     </select>
     <h2><i>-春之情-主頁導航</i></h2>
     <span><a href="#">換膚學習</a></span>    
     <img src="img/2.jpg" alt="" >      
     <img src="img/loading.gif" alt="" >
</header>
	<div id="content">	
	   <img src="img/bg1.jpg" alt="圖片" >
	</div>
	<script src=script/jquery-1.11.3.js></script>
	<script>
	//原生js實現
	function changeskin(imgurl){
            var imgobj=document.getElementsByTagName('img')	;
             imgobj[3].src=imgurl;	 
	}
		window.onload=function(){
			var btnobj=document.getElementById("btn");
			var btnobj1=document.getElementById("btn1");		
			btnobj.addEventListener("change",function(){  
			var index=btnobj.selectedIndex;	
				
			var imgurl=[" ","img/bg3.jpg","img/bg2.jpg","img/bg4.jpg","img/bg5.jpg"];
			//使用DOM方式新增選項
			var newoption=document.createElement("option");
			    newoption.appendChild(document.createTextNode("新增選項"));                         btnobj.appendChild(newoption);
			
                        var text=btnobj.options[index].text;//獲得select選項中的文本值	
			 //使用selected屬性設置為true，來選擇選項
			   if(btnobj.options[index].selected){ changeskin(imgurl[index]);}

	
            
			      //使用remove方法移除
			     btnobj.remove(2);
        
}
		
	</script>
</body>

實現效果圖：

初始頁面：

select學習小demo--實現網頁換膚選擇選項中的，背景冬：