老师请检查

来源：3-12 编程练习

李小圆_

2019-09-05 15:52:11

<!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 selectColor = document.getElementById('color');
var colorDiv = document.getElementById('div')
selectColor.onchange = function () {
colorDiv.style.backgroundColor = this.value;
switch(this.value){
case '0' : colorDiv.innerHTML = "我没有发生任何变化";
colorDiv.style.backgroundColor = '#fff'
break;
case 'yellow': colorDiv.innerHTML = "我的背景颜色变成了黄色";
break;
case 'orange': colorDiv.innerHTML = "我的背景颜色变成了橘色";
break;
case 'pink': colorDiv.innerHTML = "我的背景颜色变成了粉色";
break;
case 'purple': colorDiv.innerHTML = "我的背景颜色变成了紫色";
break;
}
}
}
        </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回答