在单击 JavaScript 时添加 CSS

有时，我们需要在用户单击某个 HTML 元素时添加新的 CSS 样式。这在许多网页和 Web 应用程序中都是一个常见的需求。本文将介绍如何使用 JavaScript 来实现这一目标。

方案一：使用 classList.toggle 方法

classList 是一个 DOM 元素的属性，它提供了一组用于添加、删除和检查元素类的方法。其中之一是 toggle()，它用于在元素类列表中切换一个类的状态。通过为元素添加一个 CSS 类，可以改变元素的样式。因此，可以使用 toggle() 方法来实现在单击 HTML 元素时切换 CSS 样式。

以下是一个示例代码片段：

// HTML 元素
var myElement = document.getElementById("myElement");

// 单击事件处理程序
myElement.onclick = function() {
  this.classList.toggle("myCSSClass");
};

在上面的示例代码中，我们首先获取一个 HTML 元素（使用 getElementById() 方法）。然后，我们将单击事件处理程序赋值给该元素的 onclick 属性。当用户单击该元素时，事件处理程序将使用 this 关键字来引用该元素，并通过调用 toggle() 方法来切换一个名为 myCSSClass 的 CSS 类。

方案二：使用 className 属性

另一种方法是使用元素的 className 属性来设置 CSS 类。这种方法稍微复杂一些，但它也可以很好地完成任务。

以下是一个示例代码片段：

// HTML 元素
var myElement = document.getElementById("myElement");

// 单击事件处理程序
myElement.onclick = function() {
  if (this.className.indexOf("myCSSClass") === -1) {
    this.className += " myCSSClass";
  } else {
    this.className = this.className.replace(" myCSSClass", "");
  }
};

在以上示例代码中，我们将单击事件处理程序赋值给 HTML 元素的 onclick 属性。当用户单击该元素时，此事件处理程序将检查元素的 className 属性是否包含 myCSSClass。如果不存在该类，则使用 += 运算符将 myCSSClass 添加到属性中。否则，它将使用 replace() 方法来删除该 CSS 类。

结论

以上是在单击 JavaScript 时添加 CSS 的两种方法。虽然方式不同，但它们都可以实现相同的目标。classlist.toggle 方法是最简单和最常用的方法，但 className 方法也是另一种好的选择。无论您使用哪种方法，您都可以轻松实现在单击 HTML 元素时改变 CSS 样式。