Botón para cambiar la clase CSS y jQuery

20 julio, 201620 julio, 2016 BlogUneWeb Programación

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>