个人中心
gpt4 book ai didi

javascript - 使用事件处理程序更改背景颜色

转载 作者：行者123 更新时间：2023-11-29 17:54:30 24 4
gpt4 key购买 nike

我正在尝试创建一个简单的表单，其中我将三个 div 堆叠在一起。单击每个框时，它们的颜色需要更改(一红色、一绿色和一蓝色)。我需要只使用一个事件处理程序来执行此操作。我坚持我的代码，我希望你们中的一个能指导我完成这个。我真的很感激!这是我的代码:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Color Changer</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="squareOne" class="listener"></div>
    <div id="squareTwo" class="listener"></div>
    <div id="squareThree" class="listener"></div>

    <script src="js/main.js"></script>
</body>
</html>

JS:

document.getElementById('squareOne').onclick = changeColor;

function changeColor() {
    document.body.style.color = "red";
    return false;
}

CSS:

#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

最佳答案

您需要使用 addEventListener 将事件添加到元素。这意味着您可以访问引用相关元素的 this。

您只指定了颜色，但我假设您指的是背景颜色，所以我相应地调整了样式。

document.getElementById('squareOne').addEventListener('click', changeColor);

function changeColor() {
    this.style.backgroundColor = "red";
    return false;
}
#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}
    <div id="squareOne" class="listener"></div>
    <div id="squareTwo" class="listener"></div>
    <div id="squareThree" class="listener"></div>

如果你想让这个动态化，你可以将颜色作为数据属性添加到元素中，并为每个元素添加事件监听器:

var elements = document.getElementsByClassName('listener');
var i;

for (i = 0; i < elements.length; ++i) {
 elements[i].addEventListener('click', changeColor)  
}

function changeColor() {
    this.style.backgroundColor = this.getAttribute('data-color');
}
#squareOne {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareTwo {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}

#squareThree {
    width: 200px;
    height: 200px;
    margin: 5px;
    background-color: #ccc;
}
    <div id="squareOne" class="listener" data-color="red"></div>
    <div id="squareTwo" class="listener" data-color="green"></div>
    <div id="squareThree" class="listener" data-color="blue"></div>

关于javascript - 使用事件处理程序更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40537142/

24 4 0
文章推荐： javascript - jQuery 类名之间有任意数字
文章推荐： android - 不幸的是 "App"已经停止了 Android Studio
文章推荐： android - 使可点击的布局膨胀？
文章推荐： javascript - 使用 JavaScript 计算 2 个不同时间表的工作时间
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com