onclick事件改变元素的背景颜色

最新推荐文章于 2023-04-14 10:35:45 发布

Byte_Dance

最新推荐文章于 2023-04-14 10:35:45 发布

阅读量8.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/Byte_Dance/article/details/78938068

JS 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面包含五个不同颜色的按钮。当用户点击这些按钮时，页面上的一个黑色div的背景色会变为所点击按钮的颜色。通过JavaScript实现了这一交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onclick事件</title>
    <script type="text/javascript" src="$function.js"></script>
</head>
<body>
    <button style="background:red">红</button>
    <button style="background:yellow">黄</button>
    <button style="background:green">绿</button>
    <button style="background:blue">蓝</button>
    <button style="background:purple">紫</button>

    <div id="divid" style="width:500px;height:500px;background:black">

    </div>
</body>

    <script type="text/javascript">
        var buttons = $imgs("button");
        for(var i=0;i< buttons.length;i++){
            buttons[i].onclick = function(){
                $("divid").style.background = this.style.background;
            }
        }
    </script>

</html>