Cambiar estilo de enlaces de dentro de un div con DOM

sergiold · #1 (**permalink**) 15/03/2006, 15:25

Hola,

tengo un problema. Me gustaría saber si es posible cambiar el estilo de los enlaces que haya dentro de un div. Me gustaría poder cambiar el estilo cuando está en estado "normal" y cuando esta en estado "hover". Todo a partir de DOM.

He intentado esto para cambiar simplemente el color de los enlaces en estado normal:

document.getElementById("capaEspecifica").getElementsByTagN ame("A").style.color = "#FF0000";

Sin embargo no me funciona.

La primera duda sería si lo que está en negrita es correcto porque no estoy seguro pero no he encontrado nada. Lo que pretendo es cambiar el estilo de los enlaces de la capaEspecifica. En css sería:

#capaEspecifica a{
color: #FF0000;
}

La segunda duda sería como cambiar posteriormente el estilo para los enlaces en hover:

#capaEspecifica a:hover{
color: #FFCC00;
}

Si alguien tiene algun idea de como conseguirlo me ayudaría muchisimo.

Saludos,

caricatos · #2 (**permalink**) 15/03/2006, 15:59

Hola:

Con DOM no puedes hacer lo que quieres... en principio, getElementsByTagName devuelve un array, y deberías recorrerlo (bucle for)

Y la otra parte de la pregunta aún no he visto que se pueda hacer.

Saludos

sergiold · #3 (**permalink**) 16/03/2006, 13:30

Ok. Gracias.

La verdad es que al no encontrar nada ya me temía que la respuesta iba a ser algo así. Sin embargo nunca se pierde nada por preguntar

.

Saludos,

JavierB · #4 (**permalink**) 16/03/2006, 13:40

Hola sergiold y caricatos

Echar un vistazo a este código a ver si es lo que se busca:

Código:

<html>
<head>
<style type="text/css">
#capaEspecifica a{
color: #FF0000;
}
#capaEspecifica a:hover{
color: #FFCC00;
}
</style>
<script type="text/javascript">
function cambiar(regla,propi,valor) {
  if (document.all)
    miRegla = document.styleSheets[0].rules;
  else
    miRegla = document.styleSheets[0].cssRules;
  for (i=0; reg=miRegla[i]; i++)
    if (reg.selectorText.toLowerCase() == regla.toLowerCase() )
      reg.style[propi]=valor;
}
</script>
</head>
<body>
<div id="capaEspecifica">
<a href="#">Enlace</a>
<a href="#">Enlace</a>
</div>
<input type="button" value="Cambiar color" onclick="cambiar('#capaEspecifica a','color','blue')" />
<input type="button" value="Cambiar hover" onclick="cambiar('#capaEspecifica a:hover','color','green')" />
</body>
</html>

Saludos,

caricatos · #5 (**permalink**) 16/03/2006, 14:08

Muy Ingenioso

Va bien al menos en mozilla y explorer

Saludos

sergiold · #6 (**permalink**) 16/03/2006, 16:51

Wowwww!

Muchisimas gracias me acabas de alegrar no sabes cuanto!

En serio te lo agradezco mucho!

Saludos,

JavierB · #7 (**permalink**) 17/03/2006, 01:50

Me alegro de que haya resultado útil el código.

Cita:

Iniciado por caricatos

Va bien al menos en mozilla y explorer

Si. Donde falla es en Opera

Saludos,