js中怎么使用classList属性修改元素的class样式

可以通过classList属性中的方法来修改元素的class样式，常见的方法有：

1. add()：添加一个或多个class，每个class用逗号隔开。

element.classList.add("class1", "class2");

2. remove()：移除一个或多个class，每个class用逗号隔开。

element.classList.remove("class1", "class2");

3. toggle()：如果元素没有该class，则添加该class，否则移除该class。

element.classList.toggle("class1");

4. contains()：判断该元素是否包含指定的class。

element.classList.contains("class1");

举个例子，如下为一个按钮点击事件，点击按钮时触发add()方法添加类名addStyle，再次点击时调用remove()方法移除类名addStyle。

<button id="btn">点击我</button>

<script>
  var btn = document.getElementById("btn");
  btn.onclick = function() {
    if (btn.classList.contains("addStyle")) {
      btn.classList.remove("addStyle");
    } else {
      btn.classList.add("addStyle");
    }
  };
</script>

<style>
  .addStyle {
    background-color: red;
  }
</style>