En este artículo vamos a ver cómo cambiar la clase de un elemento CSS utilizando jQuery. Ya hemos visto en anteriores tutoriales cómo cambiar el fichero CSS a llamar en el documento basándonos en el tamaño del viewport del usuario para hacer que una página sea responsive, y esto es muy similar, ya verás...
En este ejemplo mostraremos un icono muy pequeño al cargar la página. Después mediante jQuery cambiaremos la clase de dicho elemento para cambiar su tamaño y que luzca un poco más grande.
Cambiar el nombre de la clase utilizando jQuery
En este formulario HTML mostraremos un icono muy pequeño cuya clase es small-icon.
<div class="image-content"> <button id="switch">Switch Class</button> <div class="small-icon"> <img src="image.png" width="100%" /> </div> </div>
Cambiaremos el atributo class cuando el usuario haga clic sobre un botón destinado para ello. Utilizaremos la función de jQuery switchClass para cambiar la clase de nuestro icono. Este sería el script.
<script>
$(document).ready(function() {
$("#switch").click(function(){
$(".small-icon").switchClass("small-icon", "large-icon", 500);
$(".large-icon").switchClass("large-icon", "extra-large-icon", 500);
$(".extra-large-icon").switchClass("extra-large-icon", "small-icon", 500);
});
});
</script>
Cambiando el nombre de la clase, cambiaremos el tamaño del icono haciéndolo mucho más grande. Los estilos que hemos utilizado en este tutorial son:
<style>
.image-content{width: 200px;border: #D2CCCC 1px solid;padding: 5px 40px;height: 280px;border-radius: 4px;box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);}
#switch {padding: 10px 20px;margin: 15px 0px;border-radius: 4px;border: 0;background: #7A7B7B;color: #FFF;}
.small-icon{width:50px;}
.large-icon{width:100px;}
.extra-large-icon{width:200px;}
</style>