CSS and Javascript

Hello,
My apologies if this is not the proper forum for my question. I didn't see another that appeared more applicable.

I am modifying a website, one page of which loads a "js" script file. In it there are some conditional tests that determine whether or not to modify some code in the HTML. There are lines like this one:

document.getElementById('Box').style.border='2px solid #669966';

In the HTML there is a <div> that has the id "Box". The javascript code works fine.....it does change the border (and other properties) correctly. In the CSS for the page, "Box" has various aspects styled (font, color, background, etc) via #Box { ..parameters.. }.

I tried to use a similar approach to modify an element that uses this CSS to style it:

#menu a:visited { color:#006600; background-color:#ccf6cc; border:1px solid #009966; }

The owner wants the links to not be underlined depending on certain other things on the page. So I tried adding this to the javascript:

document.getElementById('menu').style.textDecoration='none';

That's as shown on the w3schools page at
http://www.w3schools.com/jsref/prop_style_textdecoration.asp

However, it does not achieve the desired result (appears to do nothing, in fact). So I am hoping somebody here can tell me what I am doing wrong.
Thanks in advance. I appreciate your time.

 

I think you need to cycle through it to change the links themselves:
(untested code)

Code:

var n=document.getElementById('menu').childNodes;
for(i=0;i<n.length;i++)if(n[i].tagName=="A")n[i].style.textDecoration='none';

 

Thank you very much.....your suggestion worked. I appreciate your time and advice.