Menu Highlighting with JavaScript

[rdoyle720]

This may be more of a JavaScript question, but it is related to CSS. I have little experience with JavaScript, so bear with me.

I'm trying to duplicate the menu setup at Webmonkey.com, but I want to be able to use some javascript to tell the menu to highlight the current page. I noticed you can do something like:

function color_this(id){
document.all[id].style.color="#ffcc33";
}

Which will change the text color of the div id you pass it.

But you can't do something like:

function color_this(id){
document.all[id].style.background-color="#ffcc33";
}

I'm guessing that javascript is reading the "-" as a minus sign. Anyone know a better way to do this? I can post the code for the entire page if need be.

[macrost]

rdoyle,
Try escaping the character with a \ not sure if this will work with the - but I do know it works for '
:)
Mac

[korkus2000]

Have you tried

function color_this(id){
document.all[id].style.bgcolor="#ffcc33";
}

[rdoyle720]

Unfortunately neither of those are working for me...any other ideas?

[korkus2000]

function color_this(id){
document.all[id].bgcolor="#ffcc33";
}

[rdoyle720]

Nope, still not working. Is it working for you?

[DrDoc]

The correct syntax would be:

document.all[id].style.backgroundColor="#ff33cc"

or, even just

document.all[id].style.background="#ff33cc"

When changing styles using JavaScript you do not add a hyphen. Instead, each part of the word gets capitalized.

z-index would be zIndex
text-decoration would be textDecoration
font-family would be fontFamily
etc.

[rdoyle720]

Thanks for the responses. I got this to work in IE and Opera (but not Mozilla), so I'm happy.

Thanks again!

[DrDoc]

It's easy to make it work for Mozilla too.

In your example you're just using document.all, which is IE's implementation in older browsers. It only works in Opera as long as the User-Agent says that it's IE. What you should do is first check whether document.getElementById is supported. If not, you can use document.all.

if(document.getElementById) {
document.getElementById('idname').style.backgroundColor="#ff33cc";
}
else if(document.all) {
document.all['idname'].style.backgroundColor="#ff33cc";
}

[rdoyle720]

Ah ha! Even better. Thanks!