Estilos Dinámicos

Desde que se pueden aplicar hojas de estilos en las páginas web se ha entrado en una dinámica en la cual los elementos de la página cambian de color, forma, aparecen y desaparecen, atendiendo a eventos de la propia página. Estos cambios son posibles gracias a que se pueden modificar las propiedades del estilo de un elemento. 

Si queremos cambiar el estilo de un determinado objeto de la página dinámicamente. Entendiendo como objeto, cualquier elemento de la página identificado mediante un ID. Tenemos dos posibilidades:

Cambiar una a una cada una de las clases asociadas al estilo. Por ejemplo, el siguiente código realiza dicha función...

objeto.style.color='#003366';

objeto.style.fontFamily='Verdana, Arial, Helvetica, sans-serif';

objeto.style.fontSize='12px';

objeto.style.textDecoration='none';

objeto.style.backgroundColor='#419ad4';

O bien, aplicar un estilo directamente sobre el objeto. Esta segunda forma es mucho más rápida y eficiente. Además, nos permite tener controlados los estilos de la aplicación web y que no se defina un nuevo estilo dentro del código de la página. En este caso deberemos de asignar un estilo a la propiedad className del objeto...

objeto.className='estilo';

El estilo puede estar definido directamente en la misma página o importado de una hoja de estilos. Cuando queremos aplicarselo a un objeto del documento utilizamos el ID y el método .getElementById() para acceder al elemento. La función Javascript genérica quedaría de la siguiente forma:

<script type="text/javascript">

 function cambiarHojaEstilos (id,estilo) {

   document.getElementById(id).className=estilo;  

 }

</script>