如何有效率地檢查 JavaScript DOM 元素是否包含特定類別？

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

在JavaScript 中，你可能會遇到需要判斷一個DOM 元素是否包含的場景一個特定的類別。雖然您目前使用 element.className 和 switch 語句的方法可以工作，但當元素具有多個類別時，它會受到限制。

使用element.classList.contains()

為了更好的跨瀏覽器相容性，您可以使用element.classList.contains() method:

element.classList.contains(className);

此方法傳回一個布林值，指示元素是否具有指定的類別。所有主要瀏覽器都支援它。

indexOf 的替代方法

如果您正在使用不支援element.classList 的舊版瀏覽器，您可以修改您現有的indexOf方法如下：

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

這確保檢查僅在您正在尋找的類別是時才傳回true不包含在另一個類別名稱中。

範例實作

將更新的技術應用於您的範例：

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

test.innerHTML = "";

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

此方法處理以下情況測試元素有多個類別，確保即使存在其順序或其他類，也能偵測到正確的類別。

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