Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y htaccess


jQuery addClass() y removeClass(): Añadir y eliminar clases del DOM

Con jQuery addClass() y removeClass() podemos añadir o eliminar clases a los elementos del DOM de una página web. Hasta ahora habíamos visto una serie de efectos con los que eliminábamos, vaciábamos, añadíamos HTML o modificábamos los estilos CSS.

Estas son las funciones de las que hablo: jQuery remove(), jQuery empty(), jQuery html() y jQuery animate(), jQuery css(), jQuery attr(), height() y width().

Según la documentación oficial de addClass():

jQuery addClass() añade una o más clases a los elementos seleccionados

Y siguiendo la documentación oficial de removeClass():

jQuery removeClass() elimina una, varias o todas las clases de los elementos seleccionados

Sintaxis de jQuery addClass()

Os detallo la sintaxis de esta función de jQuery para añadir clases.

Os explico los parámetros disponibles:

  • elemento (obligatorio): Objeto al cual queremos añadir una o varias clases.
  • nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
  • funcion (opcional): Al usar la Función callback por defecto nos devuelve estos valores: index con el número de posición del elemento en el DOM, y oldclass con la clase actual del elemeto.

Sintaxis de jQuery removeClass()

La sintaxis para eliminar clases de los elementos es la siguiente:

Y repaso los parámetros:

  • elemento (obligatorio): Objeto del cual queremos eliminar una o varias clases.
  • nombreClase (obligatorio): Nombre de la clase existente que queremos asignar.
  • funcion (opcional): Al usar la función por defecto nos devuelve estos valores de las clases a eliminar: index con el número de posición del elemento en el DOM, y claseactual con la clase actual del elemeto.

Ejemplos de jQuery addClass() y removeClass()

Vamos a comenzar a añadir y eliminar clases a elementos de una web con este primer ejemplo:

En este código  superior de jQuery podemos ver 4 casos diferenciados:

  • Cuando se haga click en el botón con id ‘boton01‘ añadiremos al párrafo con id ‘parrafo‘ el estilo o clase ‘rojo‘.
  • En el segundo caso al clickar en el botón con id ‘boton02’ añadiremos al párrafo con id ‘parrafo‘ 2 estilos, que son: ‘rojo‘ y ‘grande26‘.
  • En el tercer botón al hacer click en el botón con id ‘boton03‘ se eliminará la clase ‘rojo‘ del párrafo con id ‘parrafo‘.
  • Y al ser clickado el cuarto botón elimimanos las clases ‘rojo‘ y ‘grande26‘ del párrafo con id ‘parrafo‘.

El código CSS, del párrafo y de los botones es el siguiente:

Ejemplos de jQuery addClass() y removeClass() usando funciones

En este segundo ejemplo vamos a ver cómo realizar la eliminación o asignación de estilos usando las funciones estilo callback.

Os explico los 2 casos:

  • En la primera detección del click del boton con id ‘boton01‘ eliminamos las clases asociadas a los párrafos con id «parrafo«, además saco un alert avisando del número del párrafo con id ‘parrafo‘ y su clase en el DOM.
  • En el segundo click del boton con id ‘boton02‘ añadimos al primer elemento la clase ‘rojo‘ y al segundo ‘grande26‘, , además saco un alert avisando del número del párrafo con id ‘parrafo‘ y su clase en el DOM.

El código CSS, del párrafo y de los botones es el siguiente:

Selectores de jQuery

Para la detección, control o selección de elementos con jQuery os recomiendo leer este post:

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies