El problema
Los guiones Javascript permiten que nuestras páginas sean dinámicas en cuanto que pueden hacer que estas cambien de aspecto mientras las está el visitatne las está viendo en su ordenador. ¿Sabes que con una sola instrucción en Javascript puedes lograr que una elemento cambia totalmente de aspecto?

La solución
El atributo style permite modificar uno por uno los atributos de cualquier elemento de la página: colores, forma del texto, bordes, etc. Pero el cambio de estos argumentos uno por uno puede ser tedioso. El método para cambiar un conjunto de atributos de un elemento HTML se puede lograr mediante una sola instrucción consistente en cambiar el valor de su atributo class. Javascipt permite hacer esto gracias a la propiedad className que contiene la clase o estilo CSS usado para definir el aspecto de un elemento. Si por ejemplo al colocar una tabla en nuestra página le asignamos un estilo mitabla (con unos colores, bordes, fondo determinados) basta con cambiarle el valor de className a otro estilo, mitabla2, para que modifique totalmente su aspecto. Como es lógico debemos definir previamente estos estilos.

Un caso práctico

Como ejemplo usaremos un párrafo al que le asignamos un estilo que llamaremos estandar y

<body>
<p class="estandard">Este párrafo contiene letra en negrita de color blanco y fondo gris</p>
<a href="javascript:cambiar( )>Cambiar el aspecto del párrafo anterior</a>

La función clave es la de cambiar que consiste en

function cambiar()
{
document.getElementById('par').className = 'invertir'
}

Como vemos basta con una linea de código par modificar el aspecto del párrafo. Lógicamente los estilos estandar e invertir deben haber sido definidos previamente, bien en la sección Head o en un archivo de estilo ligado a la página. En este ejemplo usamos el primer método:

<style type="text/css">
.estandar {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
background-color: #999999;
border: thin ridge #006666;
}
.invertir {
font-family: Arial;
font-size: 12px;
font-weight: bold;
color: #999999;
background-color: #993300;
border: thin inset #00CC66;
}
</style>

Si quieres verlo funcionando no tienes más que pulsar en este enlace y verás como cambia el aspecto de la última parte del ejemplo.