4-12编程练习

来源：4-12 编程练习

BortalaMu

2022-01-02 12:54:32

<!DOCTYPE html>
<html>
    <head lang="en">
	    <meta charset="UTF-8">
	    <title>onchange()</title>
	    <style type="text/css">
	    	#div{
	    		width:300px;
	    		height:300px;
	    		border:2px solid gray;
	    		margin:100px  0  0 200px;
	    	}
	    </style>
	    <script type="text/javascript">
	       //补充代码
	       window.onload = function(){
	           var select = document.getElementById("color");
	           var div = document.getElementsByTagName("div")[1];
	           var options = select.options;
	           
	           select.onchange = function(){
	               if(select.value == 0){
	                   div.style.backgroundColor = "transparent";
	                   div.innerHTML = "我没有发生任何变化";
	               }else{
	                   div.style.backgroundColor = select.value;
	                   div.innerHTML = "我的背景色变成了" + options[select.selectedIndex].innerText;
	               }
	           }
	       }
	    </script>
	</head>
	<body>
        <div>
        	<span>请选择您喜欢的颜色:</span>
        	<select id="color">
        		<option value="0">请选择</option>
        		<option value="yellow">黄色</option>
        		<option value="orange">橘色</option>
        		<option value="pink">粉色</option>
        		<option value="purple">紫色</option>
        	</select>
        </div>
		<div id="div">我是div</div>
 </body>
</html>

写回答

1回答