使用JavaScript動(dòng)態(tài)添加和刪除CSS類，輕松操控網(wǎng)頁元素！本文將講解如何利用JavaScript的className和classList屬性高效地管理CSS類，實(shí)現(xiàn)網(wǎng)頁元素的動(dòng)態(tài)修改，例如顯示/隱藏菜單、突出顯示表單錯(cuò)誤或元素動(dòng)畫等效果。

核心要點(diǎn)：

• JavaScript可用于根據(jù)用戶交互（如顯示/隱藏菜單、突出顯示表單錯(cuò)誤或動(dòng)畫效果）動(dòng)態(tài)修改頁面元素的CSS類。
• className和classList屬性是操作CSS類的利器；className兼容性更廣，classList則更現(xiàn)代化和便捷。
• 可創(chuàng)建函數(shù)，使用className或classList屬性向元素添加或刪除類。這些函數(shù)可接收字符串選擇器或元素本身作為參數(shù)，循環(huán)遍歷元素并添加或刪除指定的類。
• 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, ' ');
  }
}

現(xiàn)代化方案：使用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));
}

總結(jié)

本文介紹了使用className和classList屬性添加和刪除CSS類的方法。掌握這些技巧，您可以輕松實(shí)現(xiàn)網(wǎng)頁元素的動(dòng)態(tài)效果，提升用戶體驗(yàn)。

常見問題解答 (FAQs)

• 使用Vanilla JS添加或刪除CSS類的目的？ 動(dòng)態(tài)控制HTML元素的外觀和行為，例如響應(yīng)用戶操作改變樣式、顯示/隱藏元素、創(chuàng)建動(dòng)畫效果等。

• 如何使用classList.add()添加多個(gè)類？ 將類名作為獨(dú)立參數(shù)傳遞即可：element.classList.add("class1", "class2", "class3");

• 可以刪除元素上不存在的類嗎？ 可以，classList.remove()不會報(bào)錯(cuò)，只是不會執(zhí)行任何操作。

• 如何檢查元素是否包含特定類？ 使用classList.contains()方法，返回布爾值。

• 如何同時(shí)操作多個(gè)元素的類？ 使用querySelectorAll()選擇元素，然后循環(huán)遍歷并操作每個(gè)元素的類。

• 如何切換元素的類？ 使用classList.toggle()方法。

• className和classList的區(qū)別？ className是字符串屬性；classList是返回DOMTokenList對象的只讀屬性，提供更方便的類操作方法。

• classList是否支持SVG元素？ 支持。

• classList的瀏覽器兼容性如何？ 現(xiàn)代瀏覽器廣泛支持，IE9及以下版本不支持。

• 可以鏈?zhǔn)秸{(diào)用classList方法嗎？ 可以。

希望本文對您有所幫助！

以上是快速提示：使用香草JavaScript添加或刪除CSS類的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！