Cambiar la clase CSS de un elemento con DOM

02/11/2006 -

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 (este uso lo darÃ© en un prÃ³ximo tutorial), 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>

Ver ejemplo en funcionamiento Â» Â»

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";
	}
}

Ver ejemplo en funcionamiento Â» Â»

Algunas entradas relacionadas: