使用onchange事件实现下列功能： （1） 选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。 比如：选择黄色选项，div的背景颜色就变为黄色，文本内容就变为“我的背景颜色变成了yellow色” （2）当选择下拉列表中的“请选择”时，div的背景颜色变成白色，文本变为“我没有发生任何变化”
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
</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>
<script>
var color = document.getElementById("color");
var div = document.getElementById("div");
color.onchange = function(){
var bgcolor = color.value;
console.log(bgcolor);
if(bgcolor == 0){
div.style.backgroundColor = "white";
div.innerText = "我没有发生任何变化";
}
else{
div.style.backgroundColor = bgcolor;
div.innerText = "我的背景颜色变成了" bgcolor "色";
}
}
</script>
</body>
</html>
