首頁 >web前端 >css教學 >如何有效率地檢查 JavaScript 元素是否包含特定類別?

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

Susan Sarandon
Susan Sarandon原創
2024-12-19 19:09:09751瀏覽

How to Efficiently Check if a JavaScript Element Contains a Specific Class?

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

在 JavaScript 中檢查元素是否包含特定類別是一項常見任務。雖然可以使用 switch 語句來比較元素的類別屬性,但此方法在處理具有多個類別的元素時有其限制。

要獲得更可靠的解決方案,請考慮使用 element.classList.contains 方法:

element.classList.contains('class-name');

如果元素具有指定的類,則此方法傳回 true,否則傳回 false。它支援所有現代瀏覽器,並具有適用於舊版瀏覽器的polyfills。

替代方法:

如果您需要支援舊版瀏覽器且polyfills不是一個選項,您可以使用下列調整後的ind exOf方法:

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

此方法確保在整個類別中執行搜尋

應用到範例:

在提供的範例中,我們可以使用hasClass 方法來簡化程式碼並實現期望的結果:

var test = document.getElementById('test');

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

此程式碼迭代類別數組並檢查它們中是否有任何一個包含在元素的類別中 屬性。這是比使用 switch 語句或字串匹配更有效率、更靈活的解決方案。

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn