Agregar clase al elemento haciendo clic usando JavaScript

Al crear una página o sitio web receptivo, puede haber un requisito para agregar varias funcionalidades o efectos sobre la acción del usuario o automáticamente. Por ejemplo, resaltar una sección o elemento específico al hacer clic/pasar el rato. En tales situaciones, agregar clase a un elemento haciendo clic usando JavaScript es de gran ayuda para involucrar a los usuarios en un sitio web y hacer que se destaque (sitio).

Esta redacción discutirá los enfoques para agregar una clase a un elemento haciendo clic usando JavaScript.

Cómo agregar clase a elemento haciendo clic usando JavaScript?

El "addEventListener ()"Método, en combinación con el"Lista de clase"Propiedad y la"agregar()El método "se puede aplicar para agregar una clase al elemento hecho hecho con JavaScript.

El método addEventListener () asocia un evento con un elemento. La propiedad de la lista de clases proporciona los nombres de clase CSS de un elemento. Mientras que el add () es un método de lista de clases utilizado para agregar tokens a la lista.

Estos enfoques se pueden aplicar para adjuntar un evento y agregar una clase a los elementos en función de ese evento.

Sintaxis

elemento.addEventListener (evento, escucha, uso);

En la sintaxis dada:

• "evento"Se refiere al evento especificado.
• "escuchar"¿Es la función que necesita ser invocada?.
• "usar"Es el valor opcional.

Elabremos el concepto con la ayuda de los siguientes ejemplos!

Ejemplo 1: Agregue una sola clase al elemento haciendo clic en JavaScript

En este ejemplo, se agregará una sola clase a los elementos (s) haciendo clic (s):

Haz click en mi

En el fragmento de código anterior:

• En primer lugar, incluya el "" y ""Elementos, con las clases declaradas, respectivamente.
• Además, incluya un botón en el siguiente paso.
• En el bloque de código JS, aplique el "addEventListener ()"Método para adjuntar un evento"hacer clic"A la función llamada"ClaseClicked ()".
• Además, pase el objeto "evento"Como parámetro de una función.
• En la definición de función, asocie el "evento"Objeto con el"objetivo" propiedad. Estos enfoques acceden a los elementos DOM en el activador del evento.
• Resultante, el asociado "Lista de clase"Propiedad y"agregar()El método "agregará la clase especificada al elemento (s) al hacer clic.
• En el código CSS, diseñe la clase a agregar, yo.mi., Clase adicional.

Producción

Como se observa en la salida anterior, al hacer clic en los elementos, la clase particular se agrega a los elementos.

Ejemplo 2: Agregue múltiples clases a un elemento haciendo clic en JavaScript

En este ejemplo particular, se agregarán múltiples clases a los elementos (s) haciendo clic (s):

Sitio web de Linuxhint

Javascript

Blogs

Aplique los siguientes pasos, como se indica en el código anterior:

• Incluir el declarado "

  "Elementos que tienen las clases especificadas.

• En el bloque de código JavaScript, además, adjunte un evento "hacer clic"A la función classClicked () usando el"addEventListener ()" método.
• Recuerde los enfoques discutidos para acceder a elementos en el DOM.
• Ahora, aplique el "Lista de clase"Propiedad y"agregar()Método que tiene múltiples clases como parámetros.
• Esto dará como resultado una agrega las múltiples clases establecidas a los elementos (s) haciendo clic (s).
• En el código CSS, especifique las clases que deben agregarse al elemento (s) y realizar el estilo establecido.

Producción

En esta salida en particular, se agregan múltiples clases a cada uno de los "> "Elementos en el activador del evento.

Conclusión

El "addEventListener ()"Método, en combinación con el"Lista de clase"Propiedad y la"agregar()El método "se puede aplicar para agregar una clase al elemento hecho hecho con JavaScript. Estos enfoques se pueden implementar para agregar clases simples o múltiples a elementos (s) en función del evento adjunto. Esta redacción se demuestra agregar una clase al elemento haciendo clic usando JavaScript.