<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
Codigo que muestra como canviar el valor de la propiedad class de una lista de divs
Este codigo ha sido probado con IE 5,6 y 7, Firefox 2.0, Opera 9.60 y Safari 3
http://www.lawebdelprogramador.com
-->
<html>
<head>
<title>Mostrar y esconder un listado de divs cambiando el estilo del div (JavaScript y estilos CSS)</title>
<style type="text/css">
/* Determina los estilos para mostrar el contenido */
.estilo1show {border:1px solid;margin-top:10px;padding:5px;}
.estilo2show {border:1px solid;margin-top:10px;padding:5px;font-weight:bold;}
/* Determina los estilos para NO mostrar el contenido */
.estilo1hide {display:none;}
.estilo2hide {display:none;}
/* Estilo de ejemplo para los divs internos */
.otroEstilo {border:1px solid;margin-top:10px;padding:5px;font-weight:normal;}
</style>
<script type="text/javascript">
<!--
/* En estas variables, las definiremos en la funcion load */
var table=""
var cells=""
/*
* Esta funcion se ejecuta el cargar la web, en el evento onload() del body
*/
function load()
{
/* table equivale al contenido del id "list" */
table=document.getElementById("list");
/* cells es una lista de los elementos encontrados en el orden en que aparecen */
cells=table.getElementsByTagName('div');
}
/*
* Funcion para esconder los estilos
* Tiene que recibir el nombre del estilo a esconder
*/
function ocultarEstilo(estilo)
{
/* Realizamos un bucle por todos los elementos del id "list" */
for(var i=0;i<cells.length;i++)
{
/* Si concuerda el nombre del div con el parametro recibido... */
if(table.getElementsByTagName('div')[i].getAttribute('name')==estilo)
{
/* Cambiamos el estilo del mismo por uno que este oculto */
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),estilo+'hide');
}
}
}
/*
* Funcion para mostrar los estilos
* Tiene que recibir el nombre del estilo a mostrar
*/
function mostrarEstilo(estilo)
{
for(var i=0;i<cells.length;i++)
{
if(table.getElementsByTagName('div')[i].getAttribute('name')==estilo)
{
/* Cambiamos el estilo del mismo por uno que este visible */
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),estilo+'show');
}
}
}
/*
* Funcion para ocultar todos los divs dentro del id "List"
*/
function ocultarEstilos()
{
for (var i=0;i<cells.length;i++)
{
/* Canviamos los estilos para ocultarlos de todos los divs con los nombres estilo1 y estilo2 */
if(table.getElementsByTagName('div')[i].getAttribute('name')=="estilo1")
{
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),'estilo1hide');
}else if(table.getElementsByTagName('div')[i].getAttribute('name')=="estilo2"){
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),'estilo2hide');
}
}
}
/*
* Funcion para mostrar todos los divs dentro del id "List"
*/
function mostrarEstilos()
{
for (var i=0;i<cells.length;i++)
{
/* Canviamos los estilos para visualizarlos de todos los divs con los nombres estilo1 y estilo2 */
if(table.getElementsByTagName('div')[i].getAttribute('name')=="estilo1")
{
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),'estilo1show');
}else if(table.getElementsByTagName('div')[i].getAttribute('name')=="estilo2"){
table.getElementsByTagName('div')[i].setAttribute((document.all?'className':'class'),'estilo2show');
}
}
}
-->
</script>
</head>
<!-- Al finalizar la carga de la pagina, cargamos los valores iniciales -->
<body onload="javascript:load()">
<h1>Mostrar y esconder un listado de divs cambiando el estilo del div (JavaScript y estilos CSS)</h1>
<p>
<!--
Opciones de menu
Depende de la opción que pulsemos, mostramos u ocultamos algunos divs
cambiandole el estilo estiloNshow por estiloNhide
-->
<a href="javascript:ocultarEstilo('estilo1');">Esconder estilo1</a>
<br /><a href="javascript:ocultarEstilo('estilo2');">Esconder estilo2</a>
<br /><a href="javascript:mostrarEstilo('estilo1');">Mostrar estilo1</a>
<br /><a href="javascript:mostrarEstilo('estilo2');">Mostrar estilo2</a>
<br /><a href="javascript:ocultarEstilos();">Quitar todos los estilos</a>
<br /><a href="javascript:mostrarEstilos();">Mostrar todos estilos</a>
</p>
<!-- div principal -->
<div id="list">
<!-- listado de divs que canviaremos su class -->
<div name="estilo1" class="estilo1show">div name estilo1
<div class='otroEstilo'>div dentro de estilo1. Este estilo no se ve afectado porque no tiene como name estilo1</div>
</div>
<div name="estilo2" class="estilo2show">div name estilo2
<div class='otroEstilo'>div dentro de estilo2. Este estilo no se ve afectado porque no tiene como name estilo2</div>
</div>
<div name="estilo1" class="estilo1show">div name estilo1</div>
<div name="estilo2" class="estilo2show">div name estilo2</div>
<div name="estilo1" class="estilo1show">div name estilo1</div>
<div name="estilo2" class="estilo2show">div name estilo2</div>
</div>
</body>
</html>
Ver ejemplo