Javascript changing CSS color

[isoquin]

I'm working with the following code, trying to change the color of the links inside the divs. While the background color and border change exactly as they're supposed to, the text/link color itself doesn't.

This is starting to drive me bonkers.

Ideas please?

<div class="style1">Gallery
								<div class="style2">
									<table cellpadding="5" width="50" style="font-size:11px;" class="style3">
										<tr><td onMouseOver="alt(this)" onMouseOut="alt(this)"><a href="/flash/studio/">Studio</a></td></tr>
										<tr><td onMouseOver="alt(this)" onMouseOut="alt(this)"><a href="/flash/outdoor/">Outdoor</a></td></tr>
										<tr><td onMouseOver="alt(this)" onMouseOut="alt(this)"><a href="/flash/athletic/">Athletic</a></td></tr>
										<tr><td onMouseOver="alt(this)" onMouseOut="alt(this)"><a href="/flash/event/">Event</a></td></tr>
										<tr><td onMouseOver="alt(this)" onMouseOut="alt(this)"><a href="/flash/lifestyle/">LifeStyle</a></td></tr>
									</table>
								</div>
							</div>

.style1 {
		position:relative; 
		top:0px; 
		left:0px;
		padding: 0px;
}

.style2 {
		position:absolute; 
		top:12px; 
		left:0px; 
		visibility:hidden;

.style3 td {
		background-color:#6D6E71; 
		color:white;
		text-align: center;
		border: 1px solid white;

.style3 a:link { color: white; text-decoration: none; font-weight: normal }
.style3 a:active { color: white; text-decoration: none; font-weight: bold }
.style3 a:visited { color: white; text-decoration: none; font-weight: normal }
.style3 a:hover { color: white; text-decoration: none; font-weight: normal; }
}
}

function alt(obj)
{
	if (obj.style.backgroundColor=='white')
	{
		obj.style.backgroundColor='#6D6E71';
		obj.style.color='#FF0000';
		obj.style.border='1px solid white';
	}
	
	else
	{
		obj.style.backgroundColor='white';
		obj.style.color='#FF0000';
		obj.style.border='1px solid #6D6E71';
	}
}

Disclaimer: I realize this has compat issues - assume IE for now. If you have a good reference for cross-browser, please please link me.


EDIT: obj.innerHTML.s tyle.color has the same effect
Also, obj.style.color works for non-link text

[gits]

hi ...

use the following function to set the color:

[CODE=javascript]function set_color(obj, color) {
var n = obj.childNodes;

for (var i = 0, node; node = n[i]; i++) {
node.style.colo r = color;
}
}
[/CODE]
kind regards

[isoquin]

hi ...

use the following function to set the color:

[CODE=javascript]function set_color(obj, color) {
var n = obj.childNodes;

for (var i = 0, node; node = n[i]; i++) {
node.style.colo r = color;
}
}
[/CODE]
kind regards

thank you much dear, that did the trick.

If you don't mind a quick followup (as I like to know the code, not just copy it), does this simply traverse every element in the div and individually assign the color?

[gits]

thank you much dear, that did the trick.

If you don't mind a quick followup (as I like to know the code, not just copy it), does this simply traverse every element in the div and individually assign the color?

exactly - but only the 'direct' childs ... what is enough for our purpose ;) ... post back in case you have more questions ...

kind regards