.classList - JavaScript

在 JavaScript 中，.classList 属性为元素提供了添加、删除、包含和切换类的方法。

语法

const elementClasses = element.classList;

• elementClasses：DOM 元素的类列表。
• element：要操作的 DOM 元素。

方法

• add()：添加一个或多个类。
• remove()：删除一个或多个类。
• toggle()：如果不存在，则添加一个类，如果存在，则删除该类。
• contains()：检查一个类是否存在。

示例

// 获取元素
const element = document.getElementById('example');

// 添加类
element.classList.add('new-class');

// 删除类
element.classList.remove('old-class');

// 切换类
element.classList.toggle('active-class');
element.classList.toggle('active-class'); // 该类已被删除

// 检查类是否存在
if (element.classList.contains('active-class')) {
  // 存在
} else {
  // 不存在
}

兼容性

• IE10 及以上版本支持。
• Chrome、Firefox、Safari 和 Opera 支持。

总结

使用 .classList 属性可以轻松地添加、删除、包含和切换元素的类。该方法的兼容性良好，可以在大多数主流浏览器上使用。