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

最新推荐文章于 2023-12-21 11:27:29 发布

原创最新推荐文章于 2023-12-21 11:27:29 发布 · 9k 阅读

3 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

72 篇文章

订阅专栏

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

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