¿Comprobar si un elemento contiene una clase en JavaScript?

Usando JavaScript simple (no jQuery), ¿hay alguna forma de verificar si un elemento contiene una clase?

Actualmente estoy haciendo esto:

var test = document.getElementById("test");
var testClass = test.className;

switch (testClass) {
  case "class1":
    test.innerHTML = "I have class1";
    break;
  case "class2":
    test.innerHTML = "I have class2";
    break;
  case "class3":
    test.innerHTML = "I have class3";
    break;
  case "class4":
    test.innerHTML = "I have class4";
    break;
  default:
    test.innerHTML = "";
}

<div id="test" class="class1"></div>

Expandir fragmento

El problema es que si cambio el HTML a esto...

<div id="test" class="class1 class5"></div>

...ya no hay una coincidencia exacta, por lo que obtengo el resultado predeterminado de nada ( ""). Pero todavía quiero que el resultado sea I have class1porque <div>todavía contiene la .class1clase.

May 05 '11 20:05 daGUY

Método de uso :element.classList .contains

element.classList.contains(class);

Esto funciona en todos los navegadores actuales y también hay polyfills para admitir navegadores más antiguos.

Alternativamente , si trabaja con navegadores antiguos y no desea utilizar polyfills para solucionarlos, usar indexOfes correcto, pero debe modificarlo un poco:

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

De lo contrario, también obtendrá truesi la clase que busca es parte de otro nombre de clase.

MANIFESTACIÓN

jQuery usa un método similar (si no el mismo).

Aplicado al ejemplo:

Como esto no funciona junto con la instrucción switch, puedes lograr el mismo efecto con este código:

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

También es menos redundante;)

May 05 '2011 13:05 Felix Kling

La solución fácil y eficaz es probar el método .contains .

test.classList.contains(testClass);

May 28 '2015 13:05 developer

En los navegadores modernos, puedes utilizar el containsmétodo de Element.classList:

testElement.classList.contains(className)

Manifestación

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

console.log({
    'main' : testElement.classList.contains('main'),
    'cont' : testElement.classList.contains('cont'),
    'content' : testElement.classList.contains('content'),
    'main-cont' : testElement.classList.contains('main-cont'),
    'main-content' : testElement.classList.contains('main-content'),
    'main main-content' : testElement.classList.contains('main main-content')
});

<div id="test" class="main main-content content"></div>

Expandir fragmento

Navegadores compatibles

ingrese la descripción de la imagen aquí

(de CanIUse.com )

Polirelleno

Si desea utilizar Element.classListpero también desea admitir navegadores más antiguos, considere usar este polyfill de Eli Gray .

Jan 20 '2016 20:01 John Slegers

Esta pregunta tiene una respuesta bastante sólida element.classList.contains(), pero la gente se volvió bastante extravagante con sus respuestas e hizo algunas afirmaciones audaces, por lo que realicé una prueba comparativa .

Recuerde que cada prueba realiza 1000 iteraciones, por lo que la mayoría de ellas siguen siendo muy rápidas. A menos que confíe mucho en esto para una operación específica, no verá una diferencia de rendimiento.

Realicé algunas pruebas básicamente con todas las formas de hacer esto. En mi máquina (Win 10, 24 GB, i7-8700), classList.contains funcionó muy bien. También lo hizo className.split(' '), que es efectivamente lo mismo.

Sin embargo, el ganador es classList.contains(). Si no estás comprobando que classList sea undefined, ~(' ' + v.className + ' ').indexOf(' ' + classToFind + ' ')avanza entre un 5% y un 15%

ingrese la descripción de la imagen aquí

Jun 16 '2021 00:06 Regular Jo