classList的神奇用法，原来如此简单！

2023-10-01 20:16:25

掌握classList，玩转HTML元素class属性

在HTML中，每个元素都可以拥有一个class属性，这个属性可以用于样式控制。class属性的值是一个或多个类名，类名之间用空格分隔。

<div class="container">
  <p class="text">这是一个段落</p>
</div>

在上面的代码中，<div>元素的class属性值为"container", <p>元素的class属性值为"text"。我们可以通过JavaScript来控制这些类名，从而改变元素的样式。

使用classList对象控制类名

Element.classList是一个只读属性，它返回一个DOMTokenList对象，其中包含元素所有现有的class属性。我们可以通过classList对象来操作元素的class属性。

const element = document.getElementById("my-element");
const classList = element.classList;

在上面的代码中，我们首先通过document.getElementById()方法获取元素，然后通过.classList属性获取classList对象。

classList对象的常用方法

classList对象提供了几个常用的方法，包括：

classList.add() ：向元素添加一个或多个类名。
classList.remove() ：从元素中删除一个或多个类名。
classList.toggle() ：如果元素中存在某个类名，则删除它；如果元素中不存在某个类名，则添加它。
classList.contains() ：检查元素中是否存在某个类名。
classList.replace() ：用一个或多个类名替换元素中现有的所有类名。

通过小Demo体验classList的强大功能

为了更好地理解classList的用法，我们编写一个小Demo。在这个Demo中，我们将创建一个按钮，当用户点击按钮时，按钮的样式会发生变化。

首先，我们在HTML文件中创建按钮。

<button id="my-button">点我</button>

然后，我们在JavaScript文件中获取按钮元素并添加事件监听器。当用户点击按钮时，按钮的样式会发生变化。

const button = document.getElementById("my-button");

button.addEventListener("click", () => {
  button.classList.toggle("active");
});

在上面的代码中，我们首先通过.addEventListener()方法为按钮添加点击事件监听器。当用户点击按钮时，classList.toggle()方法会被调用。classList.toggle()方法会检查按钮中是否存在"active"类名，如果存在则删除它，如果不存在则添加它。