Botón para cambiar la clase CSS y jQuery
Botón para cambiar la clase CSS y jQuery
Tenemos un ejemplo que muestra un icono de la imagen que es menor al cargar la página con el Botón para cambiar la clase CSS y jQuery. Y entonces estamos cambiando el atributo de clase de este icono y cambiar su tamaño utilizando jQuery.

Cambio de Nombre de clase usando jQuery
Este formulario HTML muestra un icono de imagen pequeña con el nombre de clase pequeño-icono.
<div clase = "imagen en contenido" > <botón ID = "interruptor" > cambio de clase </ button> <div clase = "pequeña icono" > <img src = "image.png" ancho = "100%" / > </ div> </ div>
Este atributo de clase se cambia en el evento de clic de botón. la función jQuery switchClass se utiliza para cambiar el atributo de clase. El guión es,
<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>
Al cambiar los nombres de clase el tamaño del icono se cambia de menor a mayor y aún más al tamaño extra grande. Los estilos son,
<style> . Imagen - contenido { ancho : 200px ; fronteriza : # D2CCCC 1px solid; padding: 5px 40px; altura: 280px; border-radius: 4 píxeles; box-shadow: 0px 2px 5px RGBA (0, 0, 0, 0,25 );} #switch {padding: 10px 20px; margen: 15px 0px; border-radius: 4 píxeles; border: 0; background: # 7A7B7B; de color: #FFF;} . pequeño - icono { anchura : 50px ;} . grande - icono { ancho : 100px ;} . supletoria - grande - icono { ancho : 200px ;} </ style>
Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros
Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve para más información