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:

.Clase1 {text-align:left;}
.Clase2 {text-align:right;}

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

<div class='clase1' id='div1'>
    <input type='button' onclick='cambiarClase();'>
</div>

  • 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:

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

El ejemplo completo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
  <title>Cambio de Clase en Tiempo de Ejecuci&oacute;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