HTML DOM classList 属性

添加类名

要添加一个类名到元素的 classList 中，可以使用 add() 方法。例如，假设我们有一个按钮元素：

<button id="myButton">Click me</button>

我们可以使用 JavaScript 来添加一个名为 active 的类名：

const button = document.getElementById('myButton');
button.classList.add('active');

删除类名

要从元素的 classList 中删除一个类名，可以使用 remove() 方法。例如，如果我们想删除之前添加的 active 类名：

button.classList.remove('active');

切换类名

有时候我们需要在不同状态之间切换类名，可以使用 toggle() 方法。这个方法会在元素的 classList 中添加或删除指定的类名。如果元素已经有这个类名，它会被删除；如果元素没有这个类名，它会被添加。例如，我们可以创建一个简单的按钮点击切换样式的效果：

<button id="myButton" class="active">Click me</button>

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  button.classList.toggle('active');
});

检查类名

要检查一个元素是否包含某个类名，可以使用 contains() 方法。这个方法会返回一个布尔值，表示元素的 classList 中是否包含指定的类名。例如，我们可以检查按钮是否包含 active 类名：

if (button.classList.contains('active')) {
  console.log('Button is active');
} else {
  console.log('Button is not active');
}

替换类名

有时候我们需要替换元素的类名，可以使用 replace() 方法。这个方法会将元素的一个类名替换为另一个类名。例如，我们可以将按钮的 active 类名替换为 inactive：

button.classList.replace('active', 'inactive');

总结

使用 classList 属性可以方便地操作元素的类名，而不会覆盖原有的类名。通过 add()、remove()、toggle()、contains() 和 replace() 方法，我们可以轻松地添加、删除、切换、检查和替换类名，从而实现更灵活的样式控制。希望本文对你有所帮助！