使用 JavaScript 的 onClick 事件更换按钮颜色
通过 onClick 要更改按钮的颜色：
- 为按钮添加点击事件监听器。
-
每次单击按钮时，将其
style.backgroundColor属性设置为新值。 -
可选择设置其
style.color属性。
以下是本文示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript。
const btn = document.getElementById('btn');
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = 'salmon';
btn.style.color = 'white';
});
如果每次单击按钮时都需要更改按钮的颜色，请向下滚动到下一个副标题。
我们为按钮添加了一个事件监听器。 每次单击按钮时，事件侦听器都会调用一个函数。
我们使用
style.backgroundColor属性更改按钮的背景颜色，使用style.color属性更改按钮的字体颜色。
每次单击时更改按钮的颜色
要在每次单击时更改按钮的颜色：
- 为按钮添加点击事件监听器。
-
每次单击按钮时，将其
style.backgroundColor属性设置为新值。 - 使用索引变量来跟踪当前和下一个颜色。
这是此示例的 HTML。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<button id="btn">Button</button>
<script src="index.js"></script>
</body>
</html>
这是相关的 JavaScript 代码。
const btn = document.getElementById('btn');
let index = 0;
const colors = ['salmon', 'green', 'blue', 'purple'];
btn.addEventListener('click', function onClick() {
btn.style.backgroundColor = colors[index];
btn.style.color = 'white';
index = index >= colors.length - 1 ? 0 : index + 1;
});
如果加载页面并单击按钮，我们将看到按钮的背景颜色在数组中的颜色之间交替。
我们使用了一个计数器变量来跟踪数组中颜色的索引。
每次单击按钮时，我们要么增加
index变量中的值，要么如果最后一种颜色已经显示，则将其设置回 0。
我们使用了一个三元运算符，它与 if/else 语句非常相似。
如果问号左边的表达式求值为真值，则返回冒号左边的值，否则返回右边的值。
在示例中，我们检查索引变量存储的值是否等于或大于颜色数组中的最后一个索引。
如果我们到达最后一个索引，我们将索引变量设置回 0，否则我们将存储在变量中的值增加 1。
这样我们每次点击按钮时都能得到不同的背景颜色。
相关文章
HTML 隐藏按钮并使用 Onclick 显示它们
发布时间：2023/05/05 浏览次数：175 分类：HTML
-
本篇文章介绍如何使用 onclick 隐藏和显示 HTML 按钮。使用 CSS display 属性在 HTML 中显示隐藏的按钮，我们可以先通过将其显示属性设置为 none 来隐藏 HTML 按钮。
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
