15

Tengo este elemento:

<input id="Nombre" class="clase1 clase2 clase3" type="text" />

en JavaScript puedo obtener el elemento de esta manera:

var item = document.getElementById("Nombre");

ahora como puedo saber si el elemento "item" contiene la clase "clase2"

Es decir ¿ Como puedo saber si un elemento tiene una clase ?

4 respuestas 4

20

Puedes usar la propiedad (de solo lectura) classList, que te devuelve una cadena con las distintas clases separadas por espacios (tal y como estarían en tu HTML):

var item = document.getElementById("Nombre");
document.write( '<br>', item.classList );
<p id="Nombre" class="clase1 clase2 clase3" >
Párrafo

Tiene algunos métodos útiles, como, por ejemplo, contains( ):

var item = document.getElementById("Nombre");
var hasClase2 = item.classList.contains( 'clase2' );
document.write( '<br>', 'Tiene la clase "clase2": ', hasClase2 );
<p id="Nombre" class="clase1 clase2 clase3">
Párrafo

Lista de métodos que soporta:

add( String [, String] )

Añade las clases indicadas. Si estas clases existieran en el atributo del elemento serán ignoradas.

remove( String [, String] )

Elimina las clases indicadas. Nota: Eliminar una clase que no existe NO produce un error.

item( Number )

Devuelve el valor de la clase por índice en la colección.

toggle( String [, force] )

Cuando sólo hay un argumento presente: Alterna el valor de la clase; ej., si la clase existe la elimina y devuelve false, si no, la añade y devuelve true.
Cuando el segundo argumento está presente: Si el segundo argumento se evalúa como true, se añade la clase indicada, y si se evalúa como false, la elimina.

contains( String )

Comprueba si la clase indicada existe en el atributo de clase del elemento.

replace( oldClass, newClass )

Reemplaza una clase existente por una nueva.

1
  • 4
    Ok, me sirvió lo que me contestaste !
    – Popularfan
    el 19 jul. 2019 a las 11:58
4

Si lo que quieres es hacer una condicional basado en si un elemento tiene o no una clase puedes hacer esto muy rapido:

if (document.querySelector("#nombre.clase2")) {
  document.write("Esto solo se ejecuta si el elemento con id 'nombre' tiene la clase 'clase2'")
} else {
  document.write = "Se ejecuta si no la tiene"
}
<input id="nombre" class="clase2">

2

Hay varias maneras de ver la clase de un elemento, incluso las respuestas anteriores de por si son bastante buenas, pero si quieres ampliar las opciones al resolver el problema, aqui te dejo algunas (aunque puedan estar repetidas con algunas otras respuestas).

En Javascript con .className puedes ver todas las clases que posea un elemento como un String.

.className podrias referirlo a un .classList.value ya que ambos dan un String y no un array como lo seria .classList solo.

var input = document.getElementById("Nombre");
// con .className obtienes todas las clases que pueda poseer un elemento
document.write(input.className);
<input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

De manera distinta puedes usar .classList o .classList.value como explique antes

Recuerda que .classList solo devuelve un Array no un String, solo .classList.value da un String de todas de las clases con esta propiedad.

var input = document.getElementById("Nombre"); document.write(input.classList)
<input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

Una opción diferente seria usar .contains para verificar con Booleans si es cierto o no que posee la clase que se busca

Este método muestra su valor cuando lo combinas con otra propiedad (ver último ejemplo)

var input = document.getElementById("Nombre"); document.write('Posee la clase "clase2":' + ' ' + input.classList.contains("clase2")); 
<input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>

Otra opción que posees es usar una combinación de propiedades antes mencionadas, por ejemplo:

Para ver como funciona cambia la clase "clase2" que es la que se esta buscando

Este metodo no funciona con .className debido a que este no es un Array

var input = document.getElementById("Nombre");
if (input.classList.contains("clase2")){  
document.write(input.classList + " " + "<br>" + "<b>Si posee la clase2</b>") } 
else { document.write(input.classList + "<br>" + "<b>No posee la clase que buscas") };
<input id="Nombre" class="clase1 clase2 clase3" type="text" />
<br>
Clases que posee:

0

si quieres usar el atributo this de un elemento que le des focusout

     $("input[type=email],input[type=password],input[type=text]").focusout(function () {
         if (this.classList.contains("obligatorio")) {  
             console.log("el input tiene clase obligatorio")
         } else {
             console.log("el input tiene clase obligatorio")
             }

        });

a mi me funciono para validar campos con clase

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.