En JavaScript vainilla, puede usar el contains()
proporcionado por el objeto classList para verificar si algún elemento contiene una clase CSS específica. Este método devuelve true
si la clase existe, de lo contrario false
.
Digamos que tenemos el siguiente elemento HTML:
<button class="primary disabled">Subscribe Now</button>
Y queremos comprobar si el <button>
la etiqueta contiene el disabled
clase. El primer paso es obtener una referencia al elemento del DOM:
const button = document.querySelector('button');
A continuación, utilice el classList.contains()
método para verificar si el elemento contiene el disabled
clase:
if (button.classList.contains('disabled')) {
console.log('Yahhh! Class is found.');
} else {
console.log('Class does not exist.');
}
El classList.contains()
El método funciona en todos los navegadores modernos y hay polyfills disponibles para admitir navegadores antiguos hasta Internet Explorer 6.
Alternativamente, si desea admitir navegadores antiguos sin usar ningún polyfill, simplemente use la propiedad className del elemento para verificar si la clase existe o no:
// 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.');
}
En el código anterior, primero dividimos el className
valor de la propiedad, que hace referencia al class
atributo, en tokens de cadena. Más tarde, usamos el indexOf()
método en el tokens
matriz para verificar si contiene el disabled
valor.
Quizás esté pensando por qué no usar simplemente el button.className.indexOf('disabled') !== -1
¿declaración? El problema es que devolverá true
incluso si la clase que está buscando es parte de otro nombre de clase.