如何使用 JavaScript 檢查 HTML 元素中是否存在類別？

使用JavaScript 檢查元素類別是否存在

在JavaScript 中，使用現代瀏覽器可以輕鬆確定HTML 元素是否擁有特定類別固有的classList 物件。 classList .contains() 方法可讓您驗證元素上是否存在類別。其語法如下：

element.classList.contains(class);

目前所有瀏覽器都支援此方法，舊版瀏覽器也可以使用 Polyfill。

舊版瀏覽器的替代方法

如果與舊版瀏覽器的兼容性至關重要，並且您希望避免填充，可以使用使用indexOf() 的替代方法：

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

這種最佳化方法可確保僅偵測到精確的類別匹配，防止部分類別匹配出現誤報。

將解決方案應用於提供的範例

在提供的範例中，switch 語句不能與 classList 和 indexOf 方法一起使用。但是，您可以使用以下程式碼獲得相同的結果：

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;
    }
}

修改後的程式碼更加簡潔，消除了多餘的檢查，同時準確識別 HTML 元素中的類別。

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