我想问一下,代码里的div有几个,为什么只有框里的变了颜色呢

我想问一下,代码里的div有几个,为什么只有框里的变了颜色呢

<!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>


正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,因为在获取元素时,获取的是id为div的元素,页面中只有一个哦,所以是下面的div元素发生变化

http://img1.sycdn.imooc.com//climg/5d2f000400016b8905350065.jpg

http://img1.sycdn.imooc.com//climg/5d2f001f0001b3da04670092.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

好帮手慕言 2019-07-17 18:51:47

同学你好,测试同学的代码是可以实现效果的,

同学的代码中有两个div元素。

给下拉列表绑定了onchange事件,是去改变id为div的元素的文本内容和背景颜色。

http://img1.sycdn.imooc.com//climg/5d2efd090001812408770700.jpg

如果帮助到了你,欢迎采纳~祝学习愉快~

  • 提问者 萌新当大佬 #1
    我的意思是,这里有两个div,为什么是下面的div改变了颜色
    2019-07-17 18:54:04
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师