在JavaScript中，我们可以通过修改元素的class和style属性来改变元素的样式！当我们选择一个classList属性，我们可以通过对classList进行添加和删除！请注意，我们无法直接对classList进行赋值和删除。他是以一个只读属性，我们可以使用它提供的方法来进行修改！

我们有下面的一个img元素

<img width="200" height="250" class="img-style" src="" />

获取到img元素并输出classList

 const img = document.querySelector(".img-style");
      console.log("img:", img.classList);

可以看到输出了只有一个元素的数组。DOMTokenList表示class属性的内容。如果元素不存在class属性，则返回空。

如果你展开这个属性，你会发现在classList上挂载着很多方法！例如我们经常用到的add/remove/contains/foreach

add()

使用add方法添加一个class

 img.classList.add('add-class')

刷新页面，并检查图像元素。你会看到图像现在有一个add-class。

我们连续调用两次add

 img.classList.add('add-class')
  img.classList.add('add-class')

刷新页面，并检查图像，你会发现，即使我们调用了两次，也只会添加一次。

也就是说add添加新的类名，如已经存在，取消添加

remove

使用remove来删除存在的img-style属性。

img.classList.remove('img-style')

刷新页面，并检查图像元素。你会看到图像现在已经没有img-style。

toggle

我们现在有一个可以使得图片变圆的class。

<style>
  .round {
    border-radius: 50%;
  }
</style>

我们使用add()来给img添加这个class

刷新页面，图像已经变圆

现在我们将add替换为toggle。

刷新页面，发现图像仍然可以正常变圆。

当我们连续两次调用toggle方法，你会发现图片已经无法变圆。toggle的作用是：如果该类不存在，将添加该类，如果存在则将其删除。

img.classList.toggle('round')
img.classList.toggle('round')

这个方法，在我们的日常的开发中经常会被用来实现导航的关闭和打开。

contains

我们可以用下面的代码来检查属性是否存在。

console.log(img.classList.contains('img-style'))

他的返回值是布尔类型！