如何可靠地檢查 HTML 元素是否包含 JavaScript 中的特定類別？

有沒有方法檢查 HTML 元素是否包含 JavaScript 中的特定類別？

問題：

JavaScript 初學者通常依賴 className 屬性的比較來確定元素是否包含特定的 班級。然而，當元素有多個類別且所需的類別不是唯一存在的類別時，這種方法就會失敗。

解決方案：

為了解決這個問題，JavaScript 提供了classList 屬性和 contains 方法。 classList 屬性傳回套用於元素的類別列表，並且 contains 方法會檢查該列表中是否包含特定類別。

const element = document.getElementById("test");
const hasClass1 = element.classList.contains("class1");

無論元素上存在多少類，此方法都能可靠地工作。

替代方法：

如果目標瀏覽器不支援 classList，則可以採用利用 indexOf函數的替代方法：

function hasClass(element, className) {
  return (" " + element.className + " ").indexOf(" " + className + " ") > -1;
}

實作：

要將此方法應用於問題中提供的範例，請取代原始switch 語句使用下列程式碼：

const element = document.getElementById("test");
const classes = ["class1", "class2", "class3", "class4"];

element.textContent = "";

for (let i = 0; i < classes.length; i++) {
  if (element.classList.contains(classes[i])) {
    element.textContent = `I have ${classes[i]}`;
    break;
  }
}

此程式碼迭代預期的類別並顯示出現在元素。

以上是如何可靠地檢查 HTML 元素是否包含 JavaScript 中的特定類別？的詳細內容。更多資訊請關注PHP中文網其他相關文章！