老师我看了这位同学的代码有些疑问

来源:4-12 编程练习

咸鱼王派大星

2021-03-31 16:20:32

<!DOCTYPE html>
<html>
    <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 color=document.getElementById("color"),
                 div=document.getElementById("div");
           color.onchange=function(){
               var bgcolor=this.value;
               if(bgcolor==0){
                   div.style.background="#fff";
                   div.innerHTML="我没有发生任何变化";
               }else{
                   div.style.background=bgcolor;
                   div.innerHTML="我的背景颜色变成了"+bgcolor+"色";
               }
           }
       }
    </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>
var bgcolor=this.value;

这个this.value就可以直接取到select现在的value值嘛

写回答

1回答

好帮手慕言

2021-03-31

同学你好,此处的this指向的是id为color的元素(也就是select下拉框),select下拉框比较特殊,选择了哪个选项(也就是选中了哪个option),那么this.value就是option标签中的value属性值,所以这样写是可以实现效果的。

祝学习愉快~

0

0 学习 · 15276 问题

查看课程