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.
1 |
$(elemento).addClass(nombreClase,funcion(index,oldclass)) |
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:
1 |
$(elemento).removeClass(nombreClase,funcion(index,claseactual)) |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#boton01").click(function(){ $("#parrafo").addClass("rojo"); }); $("#boton02").click(function(){ $("#parrafo").addClass("rojo grande26"); }); $("#boton03").click(function(){ $("#parrafo").removeClass("rojo"); }); $("#boton04").click(function(){ $("#parrafo").removeClass("rojo grande26"); }); }); </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!-- css del ejemplo --> <style type="text/css"> .rojo { color: red; } .grande26 {font-size: 26px;} </style> <p id="parrafo"> Cuando se haga click en los botones se realizarán asignaciones o eliminaciones de estilos en este párrafo. </p> <input type="button" name="boton01" id="boton01" value="Asignar color rojo"> <input type="button" name="boton02" id="boton02" value="Asignar texto rojo y tamaño 26px"> <input type="button" name="boton03" id="boton03" value="Eliminar estilo color rojo"> <input type="button" name="boton04" id="boton04" value="Eliminar estilo color rojo y el tamaño 26px"><br><br> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> $(document).ready(function(){ $("#boton01").click(function(){ $( "p[id=parrafo]" ).removeClass(function(index, currentClass){ alert("Índice del elemento: " + index + " con la clase: " + currentClass); }); }); $("#boton02").click(function(){ $( "p[id=parrafo]" ).addClass(function(index, currentClass){ alert("Índice del elemento: " + index + " con la clase: " + currentClass); if (index == 0) {currentClass= "rojo";} else{currentClass= "grande26";} return currentClass; }); }); }); </script> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!-- css del ejemplo --> <style type="text/css"> .rojo { color: red; } .grande26 {font-size: 26px;} .pequeno10 {font-size: 10px;} </style> <p id="parrafo" class="pequeno10"> Este primer párrafo tiene tamaño de caracter de 10px. </p> <p id="parrafo" class="rojo"> Este segundo párrafo es de color rojo. </p> <input type="button" name="boton01" id="boton01" value="Eliminar clases de los 2 párrafos"> <input type="button" name="boton02" id="boton02" value="Añadir color rojo al párrafo 1 y 26px de caracter al párrafo 2"> |
Selectores de jQuery
Para la detección, control o selección de elementos con jQuery os recomiendo leer este post: