使用 JavaScript 的 onClick 事件更换按钮颜色

JavaScript 2年前 178

通过 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';
});

使用 JavaScript 的 onClick 事件更换按钮颜色

如果每次单击按钮时都需要更改按钮的颜色，请向下滚动到下一个副标题。

我们为按钮添加了一个事件监听器。每次单击按钮时，事件侦听器都会调用一个函数。

我们使用 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;
});