快速提示：使用香草JavaScript添加或刪除CSS類

使用JavaScript動態添加和刪除CSS類，輕鬆操控網頁元素！本文將講解如何利用JavaScript的className和classList屬性高效地管理CSS類，實現網頁元素的動態修改，例如顯示/隱藏菜單、突出顯示表單錯誤或元素動畫等效果。

核心要點：

• JavaScript可用於根據用戶交互（如顯示/隱藏菜單、突出顯示表單錯誤或動畫效果）動態修改頁面元素的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中文網其他相關文章！