通过onchange事件,区域内内容发生变化而做出相应的变化

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onchange事件</title>
	<script>
		//由于script放在前面,所以要用预加载onload事件。
		window.onload=function(){
			var oValue=document.getElementById("menu");
			oValue.onchange=function(){
				var	bgcolor=this.value;
				console.log(bgcolor);
				//判断,如果value值为空,则为白色,否则为选择的颜色,并让颜色填充整个body里。
				if(bgcolor==""){
					document.body.style.background="#fff";
				}else{
					document.body.style.background=bgcolor;
				}
			}
		}
	</script>
</head>
<body>
	<div class="box">
		请输入您喜欢的颜色:
		<select name="" id="menu">
			<option value="">请选择</option>;
			<option value="red">红色</option>;
			<option value="green">绿色</option>;
			<option value="orange">橘色</option>;
			<option value="pink">粉色</option>;
			<option value="blue">蓝色</option>;
			<option value="gray">灰色</option>;
			<option value="yellow">黄色</option>;
		</select>
	</div>
</body>
</html>

结果如下图所示:

猜你喜欢

转载自blog.csdn.net/zhangqling/article/details/81119771