select学习小demo--实现网页换肤

发布时间：2020-06-14 22:10:16 作者：蜗牛oscersong
来源：网络阅读：619

一，简单版

<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--实现网页换肤选择选项中的，背景冬：