在 JavaScript 中檢查元素是否包含 CSS 類
在原生 JavaScript 中,您可以使用 contains()
classList 對象提供的方法來檢查任何元素是否包含特定的 CSS 類。此方法返回 true
如果類存在,否則 false
.
假設我們有以下 HTML 元素:
<button class="primary disabled">Subscribe Now</button>
我們要檢查 <button>
標籤包含 disabled
班級。第一步是從 DOM 中獲取對元素的引用:
const button = document.querySelector('button');
接下來,使用 classList.contains()
驗證元素是否包含 disabled
的方法 類:
if (button.classList.contains('disabled')) {
console.log('Yahhh! Class is found.');
} else {
console.log('Class does not exist.');
}
classList.contains()
該方法適用於所有現代瀏覽器,並且有可用的 polyfill 可支持舊版瀏覽器(直到 Internet Explorer 6)。
或者,如果您想支持舊瀏覽器 不使用任何 polyfill,只需使用元素的 className 屬性來檢查該類是否存在:
// convert `class` attribute into string tokens
const tokens = button.className.split(' ');
// check if tokens array contains `disabled`
if (tokens.indexOf('disabled') !== -1) {
console.log('Yahhh! Class is found.');
} else {
console.log('Class does not exist.');
}
在上面的代碼中,我們首先拆分了className
屬性值,指的是class
屬性,轉換為字符串標記。稍後,我們使用 indexOf()
tokens
上的方法 數組來檢查它是否包含 disabled
價值。
您可能在想為什麼不簡單地使用 button.className.indexOf('disabled') !== -1
陳述?問題是它會返回 true
即使您要查找的類是另一個類名的一部分。