如何在 JavaScript 中添加、刪除和切換 CSS 類

作為 Web 開發人員，您通常需要根據用戶與網頁上元素的交互來添加、刪除和切換 CSS 類。如果您過去已經使用過 jQuery，那麼您可能對 addClass() 很熟悉 , removeClass() , 和 toggleClass() 方法。

在現代 JavaScript 中，僅僅為了做一些簡單的 DOM 操作而加載完整的 jQuery 庫是沒有意義的。在本文中，您將了解如何在原生 JavaScript 中添加、刪除和切換 CSS 類 沒有 jQuery。

使用 className 屬性

在 JavaScript 中獲取和設置 CSS 類的最簡單方法是使用 className 財產。它指的是 HTML 元素的 class 的值 屬性。

假設我們有以下 HTML 元素：

<div class="pizza">🍕</div>

下面的例子展示瞭如何添加一個新的 CSS 類，或者替換上述 <div> 的所有現有 CSS 類 元素：

const pizza = document.querySelector('.pizza');

// print existing classes
console.log(pizza.className); // pizza

// add new `.spicy` class
pizza.className += 'spicy';

// replace all existing classes
pizza.className = 'hot spicy pizza';

從 class 是 JavaScript 中的保留字，名稱為 className 用於此屬性而不是 class .所有現代和舊瀏覽器都支持此屬性，包括 Internet Explorer。

使用 classList 屬性

借助 classList，在 JavaScript 中甚至還有更好的方式來操作 CSS 類 財產。這是一個只讀 返回 live 的屬性 應用於元素的所有類的 DOMTokenList 集合。

classList 屬性適用於所有現代瀏覽器，以及 IE10 及更高版本。

您可以使用 classList 屬性，以便在 vanilla JavaScript 中的元素中輕鬆添加、刪除和切換 CSS 類。

假設我們有一個像下面這樣的元素：

<div class="hot spicy pizza">
    🍕
</div>

讓我們參考上面的 <div> 元素，並在控制台上打印現有的類：

// grab element reference
const pizza = document.querySelector('.pizza');

// get all existing classes
console.log(pizza.classList);
// ["hot", "spicy", "pizza", value: "hot spicy pizza"]

// get first class name
console.log(pizza.classList[0]); // hot

// get total number of classes
console.log(pizza.classList.length); // 3

現在讓我們看看DOMTokenList的流行方法 集合，由 classList 返回 財產。我們將使用這些方法來管理和更新 HTML 元素的 CSS 類。

item() 方法

item() 方法通過其索引或 undefined 返回集合中的類 如果索引大於或等於列表的 length 屬性：

console.log(pizza.classList.item(1)); // spicy

add() 方法

add() 方法向 HTML 元素添加一個或多個類：

pizza.classList.add('sauce', 'cheese', 'tomato');

現在，該元素如下所示：

<div class="hot spicy pizza sauce cheese tomato">
    🍕
</div>

如果您嘗試添加一個已經的類 存在，add() 方法將忽略 它。要了解它是如何工作的，讓我們添加更多 cheese 去披薩店：

pizza.classList.add('cheese');

現在是元素：

<div class="hot spicy pizza cheese tomato">
    🍕
</div>

contains() 方法

contains() 方法返回 true 如果元素包含給定的類，否則 false ：

console.log(pizza.classList.contains('cheese')); // true
console.log(pizza.classList.contains('yogurt')); // false

remove() 方法

remove() 方法用於從元素中刪除一個或多個類：

pizza.classList.remove('sauce', 'potato');

如果您嘗試刪除一個不存在的類，就像我們在上面的示例中所做的那樣，不會有任何錯誤。 JavaScript 會直接忽略它。

toggle() 方法

toggle() 是一個有趣的方法。如果該類已存在，則將其刪除，否則將其添加到集合中。

如果沒有這種方法，您必須手動 使用 contain() 檢查類是否存在 在打開或關閉它之前：

// manual toggle
if (pizza.classList.contains('olive')) {
    pizza.classList.remove('olive');
} else {
    pizza.classList.add('olive');
}

使用 toggle() 方法，您只需傳遞要切換的類的名稱：

pizza.classList.toggle('olive');

toggle() 方法返回 true 如果添加了類，並且 false 如果它被刪除：

const status = pizza.classList.toggle('olive');

console.log(status); // true --> class was added

您還可以傳遞 第二個布爾參數 到 toggle() 方法來指示是添加還是刪除類。這將變成 toggle() 進入單向操作。如果第二個參數的計算結果為 false , 那麼這個類只會被移除，而不會被添加。如果計算結果為 true , 那麼這個類只會被添加，不會被移除。

這是一個例子：

const status = pizza.classList.toggle('hot', false);

console.log(status); // false --> class was removed

replace() 方法

replace() 方法可用於將 CSS 類替換為另一個類：

pizza.classList.replace('spicy', 'olive');

此方法返回 true 如果目標類成功替換為新類，否則false .

forEach() 方法

DOMTokenList collection 還支持 forEach() 方法遍歷所有類：

// iterate over all classes
pizza.classList.forEach((item, index) => {
    console.log(item);
});

結論

這就是所有的人！在本文中，我們研究了兩個重要的屬性（className &classList ) 在 JavaScript 中操作 CSS 類。

className 屬性表示 class 元素的屬性並且被包括 Internet Explorer 在內的所有瀏覽器支持。可用於添加新類或替換現有類。

另一方面，classList 屬性返回一個 live DOMTokenList 應用於 DOM 元素的所有類的集合。它可用於輕鬆添加、刪除、切換和迭代所有類。

閱讀下一篇： 在 JavaScript 中使用 CSS 類隱藏和顯示 DOM 元素