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:
.Clase2 {text-align:right;}
- Creamos un DIV, con uno de los estilos declarados, que contenga un INPUT:
- 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:
document.getElementById('div1').className = (document.getElementById('div1').className == 'clase2') ? 'clase1' : 'clase2';
}
El ejemplo completo:
<html>
<head>
<title>Cambio de Clase en Tiempo de Ejecución</title>
<STYLE TYPE="text/css">
<!--
.Clase1 {text-align:left;}
.Clase2 {text-align:right;}
//-->
</STYLE>
</head>
<script>
function cambiarClase() {
document.getElementById('div1').className = (document.getElementById('div1').className == 'clase2') ? 'clase1' : 'clase2';
}
</script>
<body>
<div class='clase1' id='div1'>
<input type='button' onclick='cambiarClase();'>
</div>
</body>
</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
