Añadir y quitar clases con jQuery

Añadir y quitar clases con jQuery

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

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Translate »
Ir a la barra de herramientas