jQuery

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

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