Añadir y quitar clases con jQuery
En este tutorial aprenderemos cómo añadir y quitar clases css a elementos de la página con jQuery.
Si no tienes todavía enlazado jquery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery
Ejemplo
Supongamos que tenemos un fichero css como este con varias clases
.negrita{
font-weight: bold;
}
.azul{
color: azul;
}
.verde{
color: verde;
}
.rojo{
color: rojo;
}
Y un párrafo
<p id="parrafo">Ejemplo de addClass y removeClass</p>
Método addClass()
Podemos añadir la clase verde al párrafo con el método addClass().
Al pulsar el botón se añadirá la clase verde y la clase negrita al párrafo.
<!--Párrafo que vamos a modificar--> <p id="parrafo">Ejemplo de addClass</p> <!--Botón--> <input type="button" class="boton" value="Click aquí"/>
<script>
//Creamos el evento click en el botón
$(".boton").click(function(){
//Añadimos la clase verde y la clase negrita
$("#parrafo").addClass("verde negrita"); });
Método removeClass()
Con removeClass() es exactamente igual. Al pulsar el botón le quitará la clase negrita al párrafo.
<!--Párrafo que vamos a modificar--> <p id="parrafo">Ejemplo de removeClass</p> <!--Botón--> <input type="button" class="boton negrita" value="Click aquí"/>
<script>
//Creamos el evento click en el botón
$(".boton").click(function(){
//Quitamos la clase negrita
$("#parrafo").removeClass("negrita"); });
Método toggleClass()
Por último veremos el método toggleClass() que hace las dos cosas. Alterna entre poner y quitar clases. Veamos un ejemplo.
Al pulsar el botón se añadirá la clase rojo al párrafo y si volvemos a pulsarlo la quitará.
<!--Párrafo que vamos a modificar--> <p id="parrafo">Ejemplo de toggleClass</p> <!--Botón--> <input type="button" class="boton" value="Click aquí"/>
<script>
//Creamos el evento click en el botón
$(".boton").click(function(){
//Ponemos la clase rojo
$("#parrafo").toggleClass("rojo"); });
Si te ha gustado no olvides compartir en redes sociales.
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo