麻烦老师查看作业，谢谢。

来源：4-12 编程练习

DanielDu87

2022-07-23 17:05:53

<!DOCTYPE html>
<html lang="en">
   <head>
      <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_tag = document.querySelector("#color");
            select_tag.onchange = function () {
               var div_tag = document.querySelector("#div");
               var select_value = select_tag.value;
               console.log(select_value);
               switch (select_value) {
                  case "0":
                     div_tag.style.background = "white";
                     div_tag.innerText = "我没有发生任何变化";
                     break;
                  default:
                     div_tag.style.background = select_value;
                     div_tag.innerText = "我的背景颜色变成了" + select_value + "色";
                     break;
               }
            };
         };
      </script>
   </head>
   <body>
      <div>
         <span>请选择您喜欢的颜色:</span>
         <label for="color">
            <select id="color">
               <option value="0">请选择</option>
               <option value="yellow">黄色</option>
               <option value="orange">橘色</option>
               <option value="pink">粉色</option>
               <option value="purple">紫色</option>
            </select>
         </label>
      </div>
      <div id="div">我是div</div>
   </body>
</html>

写回答

1回答