如何在 JavaScript 中檢查元素是否包含特定類別？

如何在JavaScript 中檢查元素是否包含類別

在JavaScript 中使用元素時，檢查元素是否包含類別通常很有用包含特定類。

問題：

當元素包含多個時，使用傳統方法將元素的 className 屬性與確切的類別名稱進行比較會導致誤報類別。例如，如果元素具有類別 class1 且程式碼檢查 class1，如果元素還具有其他類，則會傳回 false。

解決方案：element.classList.contains()

現代解決方案是使用element.classList.contains() 方法，如果元素包含指定的類，則該元素包含指定的類，該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該元素包含指定的類，則該類包含指定的類，則該類包含指定的類，可則應應則含方法將傳回true。

element.classList.contains(className);

此方法適用於所有主要瀏覽器並且有適用於舊版瀏覽器的polyfill。

替代方案：帶有修改的indexOf()

為了與舊版瀏覽器相容，可以使用indexOf()方法，但它需要稍微修改以避免誤報：

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

應用於範例

使用classList.contains() 方法，提供的程式碼可以簡化為:

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

test.innerHTML = "";

for (var i = 0, j = classes.length; i < j; i++) {
  if (test.classList.contains(classes[i])) {
    test.innerHTML = "I have " + classes[i];
    break;
  }
}

這種方法消除了冗餘，並為類別存在提供了更強大的檢查。

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