DOM监听练习

破晓之翼

发布于 2022-12-07 13:58:07

3300

发布于 2022-12-07 13:58:07

使用onchange事件实现下列功能：（1）选择下拉列表中不同的选项，页面中的div就设置成不同的背景颜色，div中的内容也发生变化。比如：选择黄色选项，div的背景颜色就变为黄色，文本内容就变为“我的背景颜色变成了yellow色” （2）当选择下拉列表中的“请选择”时，div的背景颜色变成白色，文本变为“我没有发生任何变化”

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

            #div{

                width:300px;

                height:300px;

                border:2px solid gray;

                margin:100px  0  0 200px;

            }



       



    </style>

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

    <script>

        var color = document.getElementById("color");

        var div = document.getElementById("div");

        color.onchange = function(){

             var bgcolor = color.value;

            console.log(bgcolor);

            if(bgcolor == 0){

                div.style.backgroundColor = "white";

                div.innerText = "我没有发生任何变化";

            }

            else{

            div.style.backgroundColor = bgcolor;

            div.innerText = "我的背景颜色变成了"+bgcolor+"色";

        }

                }

    </script>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除

onchange