Verifique si un elemento contiene una clase en JavaScript

El uso de clases en HTML permite que los elementos se agrupen y tengan el mismo estilo o funcionalidad. Como resultado, cambiar el comportamiento de todos los elementos que participan en una clase es tan fácil como escribir o cambiar una sola línea de código. En algunos casos, como actualizar un estilo, los usuarios pueden necesitar verificar si una clase en particular es parte de un elemento o no.

Este tutorial ilustrará cómo verificar si el elemento contiene una clase en JavaScript.

Cómo verificar si un elemento contiene una clase en JavaScript?

Para verificar si un elemento contiene una clase, use los siguientes métodos:

• Contiene () método
• método de coincidencias ()

Entendamos el funcionamiento de estos métodos individualmente.

Método 1: Compruebe si un elemento contiene una clase usando el método contiene ()

El "contiene()"Método del"Lista de clase"El objeto se puede usar para verificar si un elemento tiene un nombre de clase particular. Es uno de los métodos más populares utilizados para determinar la clase de un elemento.

Sintaxis
Siga la sintaxis dada para el método Contiene ():

elemento.Lista de clase.Contiene ('Nombre de clase')

Aquí,

• "elemento"Es un elemento HTML que se verificará si contiene esta clase específica.
• El "nombre de la clase"Identifique el nombre de la clase CSS que el elemento es parte de

Valor de retorno
Si el elemento tiene el nombre de clase, regresa "verdadero", De lo contrario, devuelve"FALSO".

Ejemplo
Crear un botón con clases "botón" y "estilo de botón"Para diseñar el botón. Adjuntar un "al hacer clic"Evento con el botón que desencadena la función para verificar si la clase especificada es parte del elemento del botón o no:

Botón

Antes del código JavaScript, la salida se verá así:

En un archivo JavaScript, simplemente escriba estas líneas de código:

function classCheck ()
constemementClass = documento.QuerySelector ('botón');
if (ElementClass.Lista de clase.contiene ('ButtonStyle'))
Alerta ("Sí! El botón contiene esta clase 'ButtonStyle');

En el código anterior:

• Defina una función "ClassCheck ()"Eso se activará en el clic del botón.
• Luego, busque el botón usando el "QuerySelector ()"Método y guárdelo en una variable"Elemento Clase".
• Llama a "contiene()"Método al pasar un nombre de clase específico como"estilo de botón"Que verificará si es parte del botón o no.
• Si regresa "verdadero", Se mostrará un mensaje de alerta:

Producción

La salida anterior indica que cuando se hace clic en el botón, muestra que tiene un "estilo de botón" clase.

Método 2: Verifique si un elemento contiene una clase usando el método de coincidencias ()

Hay otro método, "partidos()", Eso determinará si el elemento tiene una clase en particular o no. Se necesita un solo parámetro, el nombre de la clase, para verificar si el elemento contiene esa clase o no.

Sintaxis
Se utiliza la siguiente sintaxis para el método de coincidencias ():

elemento.partidos('.nombre de la clase')

En la sintaxis anterior,

• El "elemento"Es un elemento HTML que se verificará si contiene esta clase en particular o no.
• El "nombre de la clase"Indica el nombre de la clase CSS que el elemento es parte de. El nombre de la clase se pasa al método coincidentes () con un punto (.) que identifica "clase".

Valor de retorno
También regresa "verdadero"Si el elemento OR tiene una clase más", "FALSO" es regresado.

Ejemplo
En un archivo JavaScript, use las líneas de código dadas para verificar si el elemento tiene la clase específica o no llamando al método de coincidencias ():

function classCheck ()
constemementClass = documento.QuerySelector ('botón');
if (ElementClass.partidos('.buttonstyle '))
Alerta ("Sí! El botón contiene esta clase 'ButtonStyle');

En el fragmento de código anterior:

• Primero, defina una función "ClassCheck ()"Eso se activará en el clic del botón.
• Luego, busque el botón usando el "QuerySelector ()"Método y guárdelo en una variable"Elemento Clase".
• Llama a "partidos()"Método al pasar un nombre de clase específico como aquí", "estilo de botón"Con un punto (.) ante él, que indicará que es la clase y verifique si es parte del botón o no.
• Si el método coincidente () devuelve "verdadero", Un mensaje de alerta"Sí! El botón contiene esta clase 'ButtonStyle'" será mostrado:

Producción

Conclusión

Para verificar si un elemento contiene una clase, use el JavaScript "contiene()"Método o el"partidos()" método. El método Contiene () es el método más utilizado para determinar la clase del elemento. Ambos métodos regresan "verdadero"Si el elemento tiene una clase más"FALSO" es regresado. Este tutorial ilustra cómo verificar si un elemento contiene una clase en JavaScript o no con ejemplos detallados.