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.style.color has the same effect
Also, obj.style.color works for non-link text

[gits]

hi ...

use the following function to set the color:

function set_color(obj, color) {
    var n = obj.childNodes;
 
    for (var i = 0, node; node = n[i]; i++) {
        node.style.color = color;
    }
}
 

kind regards

[isoquin]

hi ...

use the following function to set the color:

function set_color(obj, color) {
    var n = obj.childNodes;
 
    for (var i = 0, node; node = n[i]; i++) {
        node.style.color = color;
    }
}
 

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