DOM基础3-13 编程练习

最新推荐文章于 2022-12-06 05:03:23 发布

原创最新推荐文章于 2022-12-06 05:03:23 发布 · 635 阅读

0 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

这篇博客介绍了如何通过JavaScript响应onchange事件，动态修改div的背景颜色和文本内容。当选择下拉列表的不同选项时，div的背景颜色将与选项value对应，并显示相应文本；选择'请选择'时，背景颜色设为白色，文本显示'我没有发生任何变化'。学习者需要完成编写页面元素加载后的事件触发函数及内部脚本，以实现上述功能。

3-13 编程练习

小伙伴们，今天我们学习了onchange鼠标事件，根据gif图，补充代码，实现下列功能：

（1）选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。

比如：选择黄色选项，div的背景颜色就变为黄色，文本内容就变为“我的背景颜色变成了yellow色”

（2）当选择下拉列表中的“请选择”时，div的背景颜色变成白色，文本变为“我没有发生任何变化”

gif图如下：

任务

根据gif效果图完成下列步骤：

第一步：先写出 “页面元素加载完成后触发的事件”，后面跟上要执行代码的函数名

第二步：写出页面元素加载完成后触发事件所执行函数中的脚本，脚本如下：

（1）通过id获取元素的方式得到下拉列表对象和div元素对象

（2）给下拉列表绑定选项发生变化时触发的事件，事件触发的函数执行代码如下：

当下拉列表的选项发生变化时，div的背景颜色也跟随发生相应的变化，div背景颜色与下拉列表的value值一致，文本内容随之变化为：“我的背景颜色变成了…”
如果下拉列表的value值是0时，div的背景颜色设置为白色，文本内容设置为“我没有发生任何变化”

任务提示

因脚本写在head标签中，下拉列表和div元素写在body标签中，为了能够获取到这些元素，故要用页面元素加载完成后触发的事件

参考答案：

<!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 menu=document.getElementById("color");
               var oDiv=document.getElementById("div");
               menu.onchange=function(){
                   var bgcolor=this.value;
                   console.log(bgcolor);
                   if(bgcolor=="0"){
                        oDiv.style.backgroundColor="#fff";
                        oDiv.innerHTML="我没有任何变化";
                   }else{
                        oDiv.style.backgroundColor=bgcolor;
                        oDiv.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>