作為前端工程師，我們經常需要根據用戶與頁面上的元素的交互來更改CSS樣式。如果你接觸過 jQuery，相信對 hasClass(), addClass()，removeClass() 這些方法不陌生。

幸運的是，HTML5提供了一種原生的方式來實現這些效果，而不再需要jQuery。

目前主流瀏覽器均已支持 classList API，對于 IE 11之前的版本需要借助于兼容庫。

什么是classList API？

HTML5 classList API為我們提供了一種方法來獲取一個DOM元素的class屬性，并且可以使用JavaScript來修改它們。

在一個元素上查詢它的 classList屬性會返回一個DOMTokenList集合。它包含了應用于當前元素的所有類，以及length屬性，length屬性表示該元素上的類的數目。

我們看看這個例子:

在瀏覽器中執行上述代碼，會看到如下輸出：

獲取一個元素所有的CSS類很簡單，但是不是特別有用，我們需要一種方式來管理和更新這些類。classList 提供了幾個方法來幫我們實現這些功能：

add()：增加指定的類
remove()：刪除指定的類
contains()：檢查指定的類是否存在于某個元素中
toggle()：切換指定的類
index()：返回列表中指定位置的類
length：返回類的數量

讓我們逐個了解一下。

增加類

為一個元素增加一個CSS類很簡單。只需要把類名作為參數傳遞到 add() 方法即可。注意如果此類名已經存在于元素上，則不會再次添加。

要增加多個類，以多個參數形式傳值：

刪除類

要刪除一個類，你只需要把類名作為參數傳給 remove() 方法即可。如果類名不存在于classList中，則什么都不會發生。

要刪除多個類，以多個參數傳給 remove方法：

檢查一個類是否存在

使用 contains() 方法，可以可以檢查一個指定的類是否存在于元素的 classList 中，然后可以根據返回值執行一些操作。

例如：

切換類名

根據用戶的行為來增加或者刪除一個類，這是一個常見的需求。在 classList API中提供了 toggle() 方法來實現這個功能。

檢查類的數量

想要知道有多個類應用到了一個元素上，可以使用 length 屬性：

總結

如上所示，HTML5 的 classList 簡單易用。如果你的項目不需要兼容舊瀏覽器，可以根據項目實際情況直接使用 classList API提供的方法，可以簡化你的代碼。

?