使用 JavaScript 在单击时切换元素的背景颜色
JavaScript 中要在单击时切换元素的背景颜色：
- 向元素添加点击事件侦听器。
- 每次单击该元素时，检查该元素的当前背景颜色并进行更改。
-
使用
element.style.backgroundColor属性更改元素的背景颜色。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="btn" style="background-color: salmon">Button</button>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
const backgroundColor = btn.style.backgroundColor;
if (backgroundColor === 'salmon') {
btn.style.backgroundColor = 'green';
// 👇️ optionally change text color
// btn.style.color = 'white';
} else {
btn.style.backgroundColor = 'salmon';
// 👇️ optionally change text color
// btn.style.color = 'blue';
}
});
我们向按钮元素添加了一个点击事件侦听器，因此每次单击按钮时都会调用一个函数。
在函数中，我们检查元素的当前背景颜色是否等于特定值，如果是则更改它。
如果元素的背景颜色不等于该值，我们将背景颜色重置为其初始值。
我们可以使用 else if 语句添加更多条件。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
const backgroundColor = btn.style.backgroundColor;
if (backgroundColor === 'salmon') {
btn.style.backgroundColor = 'green';
} else if (backgroundColor === 'green') {
btn.style.backgroundColor = 'purple';
} else {
btn.style.backgroundColor = 'salmon';
}
});
在上面的示例中，元素的背景颜色在橙红色、绿色和紫色之间交替。
请注意，我们可以使用事件对象上的target属性来访问用户单击的元素，而不是显式使用 btn。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
const backgroundColor = event.target.style.backgroundColor;
if (backgroundColor === 'salmon') {
event.target.style.backgroundColor = 'green';
} else {
event.target.style.backgroundColor = 'salmon';
}
});
在示例中，我们在事件对象上使用了 target 属性。 target 属性是对调度事件的对象（元素）的引用。
换句话说，
event.target使我们能够访问用户单击的 DOM 元素。
因为事件监听器被添加到按钮元素，所以 event.target 指向按钮。
我们可以通过 console.log 打印 target 属性来查看用户点击的 DOM 元素。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
console.log(event.target);
const backgroundColor = event.target.style.backgroundColor;
if (backgroundColor === 'salmon') {
event.target.style.backgroundColor = 'green';
} else {
event.target.style.backgroundColor = 'salmon';
}
});
使用 event.target 更通用一些，在向较大元素添加事件时特别有用，例如 document。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
