Modificar el aspecto de un elemento
Problema:
Cambiar el aspecto de un elemento de la página web usando javascript de forma dinámica.
Decimos que javascript permite págnas dinámicas que interaccionen con los usuarios. Incluso es posible cambiar totalmente el aspecto visual de toda una página.
Por ejemplo podríamos cambiar los colores de fondo y texto con un esquema negro sobre blanco para el día y blanco sobre negro para la noche.
O cambiar el tamaño del texto dependiendo del tamaño de la pantalla.
Solución
Se usa el atributo class de los elementos de la página para aplicar estilos en linea.
Los estilos se aplican a los elementos de la página mediante su atributo class. Su valor se refiere a una regla CSS previamente definida
Las clases aplicadas en la página web no son estáticas, pueden alterarse en cualquier momento. Esto se logra con la propiedad classList y sus métodos para agregar (add), eliminar (remove) o cambiar (replace) entre otros..
Ejemplo
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.