使用 JavaScript 在单击时切换元素的背景颜色

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 在单击时切换元素的背景颜色

作者：迹忆客最近更新：2023/01/20 浏览次数：

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