JS 修改类列表

在 JavaScript 中，我们经常需要通过操作元素的类列表（也被称为类名）。这灵活的工具可以让我们动态地修改一个元素的样式和行为。

获取元素类列表

我们可以使用 classList 属性来获取一个元素的类列表。这个属性返回一个 DOMTokenList 对象，它类似于数组，并且提供了几个方法来操作类名。

const element = document.querySelector('#myElement');

// 获取类列表
const classes = element.classList;

// 遍历类列表
for (let i = 0; i < classes.length; i++) {
  console.log(classes[i]);
}

添加和删除类名

使用 add() 和 remove() 方法可以添加和删除单个类名。

const element = document.querySelector('#myElement');

// 添加类名
element.classList.add('myClass');

// 删除类名
element.classList.remove('myClass');

我们也可以添加或删除多个类名，只需将它们作为参数传递给 add() 或 remove()。

const element = document.querySelector('#myElement');

// 添加多个类名
element.classList.add('myClass', 'anotherClass');

// 删除多个类名
element.classList.remove('myClass', 'anotherClass');

切换类名

toggle() 方法用于添加或删除一个类名。如果一个元素已经有这个类名，那么这个类名将被删除，否则它将被添加。

const element = document.querySelector('#myElement');

// 切换类名
element.classList.toggle('myClass');

toggle() 方法也可以接受一个布尔值作为参数。如果这个值为 true，则添加类名，否则删除它。

const element = document.querySelector('#myElement');

// 添加或删除类名
element.classList.toggle('myClass', shouldAddClass);

替换类名

replace() 方法用于用一个新的类名替换现有的类名。

const element = document.querySelector('#myElement');

// 替换类名
element.classList.replace('oldClass', 'newClass');

总结

类列表是一个强大的工具，在 JavaScript 中用于动态地修改元素的样式和行为。通过使用 classList 属性提供的方法，我们可以添加、删除、切换、替换类名。掌握这些方法可以让我们在开发网页和应用程序时更加灵活和高效。