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

幸運(yùn)的是，HTML5提供了一種原生的方式來實(shí)現(xiàn)這些效果，而不再需要jQuery。

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

什么是classList API？

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

在一個(gè)元素上查詢它的 classList屬性會(huì)返回一個(gè)DOMTokenList集合。它包含了應(yīng)用于當(dāng)前元素的所有類，以及l(fā)ength屬性，length屬性表示該元素上的類的數(shù)目。

我們看看這個(gè)例子:

在瀏覽器中執(zhí)行上述代碼，會(huì)看到如下輸出：

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

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

讓我們逐個(gè)了解一下。

增加類

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

要增加多個(gè)類，以多個(gè)參數(shù)形式傳值：

刪除類

要?jiǎng)h除一個(gè)類，你只需要把類名作為參數(shù)傳給 remove() 方法即可。如果類名不存在于classList中，則什么都不會(huì)發(fā)生。

要?jiǎng)h除多個(gè)類，以多個(gè)參數(shù)傳給 remove方法：

檢查一個(gè)類是否存在

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

例如：

切換類名

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

檢查類的數(shù)量

想要知道有多個(gè)類應(yīng)用到了一個(gè)元素上，可以使用 length 屬性：

總結(jié)

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

?