Este ejemplo tiene múltiples aplicaciones: cambiar el aspecto de la página web, aumentar el tamaño del texto, cambiar el aspecto de un botón si a través de él hemos cargado contenido, mostrar u ocultar elementos, etc. Supongamos que tenemos un div con una clase «aspecto1» y que al pulsar sobre un enlace este div cambie a una clase «aspecto2».
Me valgo de una función que recoge el id como parámetro y que le cambia el estilo:
javascript:
function CambiarEstilo(id) { var elemento = document.getElementById(id); elemento.className = "aspecto2"; }
CSS:
body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #FFFFFF; margin-left: 100px; margin-right: 100px; } .aspecto1 { border: 1px solid #CCC; padding: 10px 5px 6px 5px; background-color: #E4E4E4; color: #666; } .aspecto2{ background-color:#F1D59E; border: #F2BE84 5px solid; color: #666; font-family: "Lucida Sans Unicode", Verdana, Arial, Georgia; font-size: 12px; width:200px; padding:10px; }
HTML:
<p><a href="javascript:CambiarEstilo('EjCambioEstilo')">Cambiar</a></p> <div id="EjCambioEstilo" class="aspecto1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus mollis. Etiam aliquet. Ut ultrices justo ut arcu. Proin a purus. Fusce pharetra ultrices nibh. Nam erat lectus, dapibus id, congue vel, cursus a, tellus. Sed turpis ante, condimentum at, accumsan eget, pulvinar vitae, nibh. </p></div>
ACTUALIZACIÓN:
Para que el elemento con un segundo clic volviese a su clase inicial tan sólo hay que averiguar en cada momento qué clase tiene y cambiar a una u otra en función de ello. De este modo, la función sería la siguiente:
function CambiarEstilo(id) { var elemento = document.getElementById(id); if (elemento.className == "aspecto1") { elemento.className = "aspecto2"; } else { elemento.className = "aspecto1"; } }