DIPLOX

Cambiar la clase css de un elemento con dom

Por face

Jueves, 06/08/2009

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>

Por face