tiene - saber si una clase existe javascript

¿Probar si un elemento contiene una clase?

Question

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

Actualmente, estoy haciendo esto:

HTML:

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

JS:

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

Esto resulta en esta salida, que es correcta:

I have class1

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

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

... ya no hay una coincidencia exacta, así que obtengo la salida predeterminada de nada ( "" ). Pero sigo queriendo que la salida I have class1 porque <div> todavía contiene la clase .class1 .

Answer 1

Element.matches ()

element.matches (selectorString)

Según MDN Web Docs :

El método Element.matches() devuelve true si el elemento sería seleccionado por la cadena del selector especificada; de lo contrario, devuelve false .

Por lo tanto, puede usar Element.matches() para determinar si un elemento contiene una clase.

const element = document.querySelector(''#example'');
console.log(element.matches(''.foo'')); // true

<div id="example" class="foo bar"></div>

Ver compatibilidad de navegador

Answer 2

1. El truco de Felix de agregar espacios al lado del nombre de clase y la cadena que está buscando es el enfoque correcto para determinar si los elementos tienen la clase o no.

2. Para tener un comportamiento diferente según la clase, puede usar referencias de funciones, o funciones, dentro de un mapa:

   function fn1(element){ /* code for element with class1 */ }
   function fn2(element){ /* code for element with class2 */ }
   function fn2(element){ /* code for element with class3 */ }
   var fns={''class1'': fn1, ''class2'': fn2, ''class3'': fn3};
   for(var i in fns) {
   if(hasClass(test, i)) {
   fns[i](test);
   }
   }

   • for (var i en fns) itera a través de las teclas dentro del mapa fns.
   • No tener interrupciones después de fnsi permite que el código se ejecute siempre que haya una coincidencia, de modo que si el elemento tiene, fi, class1 y class2, tanto fn1 como fn2 se ejecutarán.
   • La ventaja de este enfoque es que el código para ejecutar para cada clase es arbitrario, como el de la instrucción switch; en su ejemplo, todos los casos realizaron una operación similar, pero mañana es posible que tenga que hacer cosas diferentes para cada uno.
   • Puede simular el caso predeterminado teniendo una variable de estado que indique si se encontró una coincidencia en el bucle o no.

Answer 3

¡Vea este enlace de Codepen para una forma más rápida y fácil de verificar un elemento si tiene una clase específica que usa JavaScript de vainilla ~!

hasClass (Vanilla JS)

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

Answer 4

¿En qué elemento se encuentra actualmente la clase ''.bar''? Aquí hay otra solución pero depende de ti.

var reg = /Image/g, // regexp for an image element
query = document.querySelector(''.bar''); // returns [object HTMLImageElement]
query += this.toString(); // turns object into a string
if (query.match(reg)) { // checks if it matches
alert(''the class .bar is attached to the following Element:/n'' + query);
}

demo jsfiddle

Por supuesto, esto es solo una búsqueda de 1 elemento simple <img> ( /Image/g ) pero puede poner todo en una matriz como <li> es /LI/g , <ul> = /UL/g etc.

Answer 5

Aquí hay un pequeño fragmento de código Si está intentando comprobar si el elemento contiene una clase, sin usar jQuery.

function hasClass(element, className) {
return element.className && new RegExp("(^|//s)" + className + "(//s|$)").test(element.className);
}

Esto explica el hecho de que el elemento puede contener varios nombres de clase separados por espacio.

O

También puede asignar esta función al elemento prototipo.

Element.prototype.hasClass = function(className) {
return this.className && new RegExp("(^|//s)" + className + "(//s|$)").test(this.className);
};

Y desencadenarlo de esta manera (muy similar a la función .hasClass() jQuery):

document.getElementById(''MyDiv'').hasClass(''active'');

Answer 6

Aquí hay una solución trivial insensible a mayúsculas y minúsculas:

function hasClass(element, classNameToTestFor) {
var classNames = element.className.split('' '');
for (var i = 0; i < classNames.length; i++) {
if (classNames[i].toLowerCase() == classNameToTestFor.toLowerCase()) {
return true;
}
}
return false;
}

Answer 7

Como él quiere usar switch (), me sorprende que nadie haya presentado esto todavía:

var test = document.getElementById("test");
var testClasses = test.className.split(" ");
test.innerHTML = "";
for(var i=0; i<testClasses.length; i++) {
switch(testClasses[i]) {
case "class1": test.innerHTML += "I have class1<br/>"; break;
case "class2": test.innerHTML += "I have class2<br/>"; break;
case "class3": test.innerHTML += "I have class3<br/>"; break;
case "class4": test.innerHTML += "I have class4<br/>"; break;
default: test.innerHTML += "(unknown class:" + testClasses[i] + ")<br/>";
}
}

Answer 8

Creo que la solución perfecta será esta.

if ($(this).hasClass("your_Class"))
alert("positive");
else
alert("Negative");

Answer 9

En los navegadores modernos, puedes usar el método de Element.classList 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'')
});

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

Navegadores compatibles

(de caniuse.com/#feat=classlist )

Relleno de polietileno

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

Answer 10

Esto es compatible con IE8 +.

Primero verificamos si existe classList si es así, podemos usar el método de classList que es compatible con IE10 +. Si estamos en IE9 u 8, se recurre al uso de una expresión regular, que no es tan eficiente, pero es un polyfill conciso.

if (el.classList)
el.classList.contains(className);
else
new RegExp(''(^| )'' + className + ''( |$)'', ''gi'').test(el.className);

Answer 11

Esto es un poco viejo, pero tal vez alguien encuentre útil mi solución:

// Fix IE''s indexOf Array
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function (searchElement) {
if (this == null) throw new TypeError();
var t = Object(this);
var len = t.length >>> 0;
if (len === 0) return -1;
var n = 0;
if (arguments.length > 0) {
n = Number(arguments[1]);
if (n != n) n = 0;
else if (n != 0 && n != Infinity && n != -Infinity) n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
if (n >= len) return -1;
var k = n >= 0 ? n : Math.max(len - Math.abs(n), 0);
for (; k < len; k++) if (k in t && t[k] === searchElement) return k;
return -1;
}
}
// add hasClass support
if (!Element.prototype.hasClass) {
Element.prototype.hasClass = function (classname) {
if (this == null) throw new TypeError();
return this.className.split('' '').indexOf(classname) === -1 ? false : true;
}
}

Answer 12

Esto está un poco apagado, pero si tienes un evento que activa el cambio, puedes hacerlo sin clases:

<div id="classOne1"></div>
<div id="classOne2"></div>
<div id="classTwo3"></div>

Tu puedes hacer

$(''body'').click( function() {
switch ( this.id.replace(/[0-9]/g, '''') ) {
case ''classOne'': this.innerHTML = "I have classOne"; break;
case ''classTwo'': this.innerHTML = "I have classTwo"; break;
default: this.innerHTML = "";
}
});

.replace(/[0-9]/g, '''') elimina dígitos de id .

Es un poco hacky, pero funciona para interruptores largos sin funciones o bucles adicionales

Answer 13

He creado un método de prototipo que utiliza classList , si es posible, o bien recurre a indexOf :

Element.prototype.hasClass = Element.prototype.hasClass ||
function(classArr){
var hasClass = 0,
className = this.getAttribute(''class'');
if( this == null || !classArr || !className ) return false;
if( !(classArr instanceof Array) )
classArr = classArr.split('' '');
for( var i in classArr )
// this.classList.contains(classArr[i]) // for modern browsers
if( className.split(classArr[i]).length > 1 )
hasClass++;
return hasClass == classArr.length;
};
///////////////////////////////
// TESTS (see browser''s console when inspecting the output)
var elm1 = document.querySelector(''p'');
var elm2 = document.querySelector(''b'');
var elm3 = elm1.firstChild; // textNode
var elm4 = document.querySelector(''text''); // SVG text
console.log( elm1, '' has class "a": '', elm1.hasClass(''a'') );
console.log( elm1, '' has class "b": '', elm1.hasClass(''b'') );
console.log( elm1, '' has class "c": '', elm1.hasClass(''c'') );
console.log( elm1, '' has class "d": '', elm1.hasClass(''d'') );
console.log( elm1, '' has class "a c": '', elm1.hasClass(''a c'') );
console.log( elm1, '' has class "a d": '', elm1.hasClass(''a d'') );
console.log( elm1, '' has class "": '', elm1.hasClass('''') );
console.log( elm2, '' has class "a": '', elm2.hasClass(''a'') );
// console.log( elm3, '' has class "a": '', elm3.hasClass(''a'') );
console.log( elm4, '' has class "a": '', elm4.hasClass(''a'') );

<p class=''a b c''>This is a <b>test</b> string</p>
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
<text x="10" y="20" class=''a''>SVG Text Example</text>
</svg>

Página de prueba

Answer 14

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

test.classList.contains(testClass);

Answer 15

Me gustaría completar la funcionalidad classList y utilizar la nueva sintaxis. De esta manera, el navegador más nuevo usará la nueva implementación (que es mucho más rápida) y solo los navegadores antiguos tomarán el impacto del rendimiento del código.

https://github.com/remy/polyfills/blob/master/classList.js

Answer 16

Para mí la forma más elegante y rápida de conseguirlo es:

function hasClass(el,cl){
return !!el.className && !!el.className.match(new RegExp(''//b(''+cl+'')//b''));
}

Answer 17

Prueba este:

document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp(''//b''+cl+''//b'');
var elem = this.getElementsByTagName(''*'');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};

Answer 18

Sé que hay muchas respuestas, pero la mayoría de ellas son para funciones adicionales y clases adicionales. Este es el que yo personalmente uso; ¡Mucho más limpio y mucho menos líneas de código!

if( document.body.className.match(''category-page'') ) {
console.log(''yes'');
}

Answer 19

Si el elemento solo tiene un nombre de clase, puede verificarlo rápidamente obteniendo el atributo de clase. Las otras respuestas son mucho más robustas, pero esto ciertamente tiene sus casos de uso.

if ( element.getAttribute(''class'') === ''classname'' ) {
}

Answer 20

Solo para agregar a la respuesta las personas que intentan encontrar nombres de clase dentro de los elementos SVG en línea.

Cambia la función hasCLass() a:

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

En lugar de usar la propiedad className , necesitarás usar el método getAttribute() para tomar el nombre de la clase.

Answer 21

Un oneliner simplificado: ¹

function hasClassName(classname,id) {
return String ( ( document.getElementById(id)||{} ) .className )
.split(//s/)
.indexOf(classname) >= 0;
}

¹ indexOf para matrices no es compatible con IE (por supuesto). Hay muchos parches de monos que se pueden encontrar en la red para eso.

Answer 22

Utilice el método 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 trabajas con navegadores más antiguos y no quieres usar polyfills para corregirlos, usar indexOf es correcto, pero debes modificarlo un poco:

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

De lo contrario, también obtendrá true si la clase que está buscando es parte de otro nombre de clase.

DEMO

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

Aplicado al ejemplo:

Como esto no funciona junto con la instrucción de cambio, podría 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;)

Answer 23

className es solo una cadena para que pueda usar la función regular de indexOf para ver si la lista de clases contiene otra cadena.