Cambiar la clase de un tag HTML mediante Javascript

Utilizando las bondades de DOM, Javascript y CSS, podemos lograr combinaciones muy interesantes.

Un ejemplo de ello, es cambiar el estilo de parte de un documento HTML en tiempo de ejecución; simplemente modificando la clase una etiqueta HTML con el atributo className.

Para explicarlo mejor, veamos el ejemplo en concreto para explicar:

  • Definimos dos estilos:


[CSS]
.Clase1 {text-align:left;}
.Clase2 {text-align:right;}
[/CSS]

  • Creamos un DIV, con uno de los estilos declarados, que contenga un INPUT:


[HTML]

[/HTML]

  • Escribimos la función Javascript que ante el clic sobre el botón, actualice el className (y por lo tanto el estilo) del DIV que lo contiene:


[JS]
function cambiarClase() {
document.getElementById('div1').className = (document.getElementById('div1').className == 'clase2') ? 'clase1' : 'clase2';
}
[/JS]

El ejemplo completo:

[HTML]



Cambio de Clase en Tiempo de Ejecución



[/HTML]

En el ejemplo, al hace clic sobre ‘boton1’, cambiará la clase del DIV que lo contiene, y por lo tanto su alineación. En definitiva, veremos como ‘boton1’ se, a lo ancho, de un extremo al otro de la ventana.

Vía: EMILIO

Tags: , , ,


Leave a Reply

Your email address will not be published. Required fields are marked *