Comprobar si un elemento contiene una clase CSS en JavaScript

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.