Blog
Eliminar y agregar clases con jQuery
En este tutorial aprenderemos a eliminar y agregar clases con jQuery utilizando las funciones addClass y removeClass. Esto nos puede beneficiar en muchas ocasiones, como por ejemplo cuando queremos manipular muchas propiedades CSS de una etiqueta.
¿Cómo eliminar y agregar clases con jQuery?
Para realizar esto debemos incluir la librería de jQuery, en nuestro caso vamos a utilizar las que nos ofrece google de manera online. Luego vamos a definir dos clases en CSS las cuales representan a dos cuadrados de distintos colores y tamaños que vamos utilizar con las funciones addClass y removeClass de jQuery como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Eliminar y agregar clases con jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
.cuadrado-rojo-chico{
width:200px;
height: 200px;
background: red;
}
.cuadrado-verde-grande{
width:400px;
height: 400px;
background: green;
}
</style>
</head>
<body>
<div id="cuadrado" class="cuadrado-rojo-chico"></div>
<button type="button" onclick="cambiarRojoChico()">Rojo chico</button>
<button type="button" onclick="cambiarVerdeGrande()">Verde grande</button>
<script>
function cambiarVerdeGrande(){
// Elimino la clase de color rojo y tamaño chico
$('#cuadrado').removeClass('cuadrado-rojo-chico');
//Agrego lla nueva clase de color verde y tamaño grande
$('#cuadrado').addClass('cuadrado-verde-grande');
}
function cambiarRojoChico(){
// Hago lo contrario que en el caso anterior
$('#cuadrado').removeClass('cuadrado-verde-grande');
$('#cuadrado').addClass('cuadrado-rojo-chico');
}
</script>
</body>
</html>
Simplemente al presionar los botones vamos a ver el resultado de eliminar y agregar una clase en jQuery, cambiando así el color y tamaño del cuadrado.
Bueno gente, hemos llegado al final de este tutorial en el cual se explica cómo eliminar y agregar clases con jQuery. Ante cualquier problema no duden en dejar un comentario.