使用JavaScript動態添加和刪除CSS類，輕鬆操控網頁元素！本文將講解如何利用JavaScript的className和classList屬性高效地管理CSS類，實現網頁元素的動態修改，例如顯示/隱藏菜單、突出顯示表單錯誤或元素動畫等效果。
核心要點：
className和classList屬性是操作CSS類的利器；className兼容性更廣，classList則更現代化和便捷。 className或classList屬性向元素添加或刪除類。這些函數可接收字符串選擇器或元素本身作為參數，循環遍曆元素並添加或刪除指定的類。 classList屬性（IE10及以上瀏覽器支持）提供一系列方法來操作類，包括add、remove和toggle，簡化了添加或刪除類的過程。 兼容性方案：使用className屬性
className屬性允許訪問HTML元素的class屬性。通過字符串操作，我們可以添加和刪除類。我們將使用querySelectorAll()方法選擇HTML元素（兼容IE8及以上瀏覽器）。
添加類：
function addClass(elements, myClass) {
if (!elements) return;
if (typeof elements === 'string') elements = document.querySelectorAll(elements);
else if (elements.tagName) elements = [elements];
for (let i = 0; i < elements.length; i++) {
if (!(' ' + elements[i].className + ' ').includes(' ' + myClass + ' ')) {
elements[i].className += ' ' + myClass;
}
}
}刪除類：
function removeClass(elements, myClass) {
if (!elements) return;
if (typeof elements === 'string') elements = document.querySelectorAll(elements);
else if (elements.tagName) elements = [elements];
const reg = new RegExp('(^| )' + myClass + '($| )', 'g');
for (let i = 0; i < elements.length; i++) {
elements[i].className = elements[i].className.replace(reg, ' ');
}
}現代化方案：使用classList屬性
IE10及以上瀏覽器支持classList屬性，簡化了類的操作。
添加類：
function addClass(selector, myClass) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => element.classList.add(myClass));
}刪除類：
function removeClass(selector, myClass) {
const elements = document.querySelectorAll(selector);
elements.forEach(element => element.classList.remove(myClass));
}總結
本文介紹了使用className和classList屬性添加和刪除CSS類的方法。掌握這些技巧，您可以輕鬆實現網頁元素的動態效果，提升用戶體驗。
常見問題解答 (FAQs)
使用Vanilla JS添加或刪除CSS類的目的？ 動態控制HTML元素的外觀和行為，例如響應用戶操作改變樣式、顯示/隱藏元素、創建動畫效果等。
如何使用classList.add()添加多個類？ 將類名作為獨立參數傳遞即可：element.classList.add("class1", "class2", "class3");
可以刪除元素上不存在的類嗎？ 可以，classList.remove()不會報錯，只是不會執行任何操作。
如何檢查元素是否包含特定類？ 使用classList.contains()方法，返回布爾值。
如何同時操作多個元素的類？ 使用querySelectorAll()選擇元素，然後循環遍歷並操作每個元素的類。
如何切換元素的類？ 使用classList.toggle()方法。
className和classList的區別？ className是字符串屬性；classList是返回DOMTokenList對象的只讀屬性，提供更方便的類操作方法。
classList是否支持SVG元素？ 支持。
classList的瀏覽器兼容性如何？ 現代瀏覽器廣泛支持，IE9及以下版本不支持。
可以鍊式調用classList方法嗎？ 可以。
希望本文對您有所幫助！
以上是快速提示：使用香草JavaScript添加或刪除CSS類的詳細內容。更多資訊請關注PHP中文網其他相關文章！
