Javascript + HTML DOM problem

[Mushy-pea]

Hello everyone. I am trying to write a drop down menu Javascript and have run into a little problem. I need to change the (opacity=0) value inside this custom style:

<style id="menu_style" type="text/css"><!--.menu {z-index: 3; filter: alpha(opacity=0); position: absolute; left: 200px; top: 100px; width: 180px; height: 210px; background-color: #0000FF}

The obvious approach would seem to be:

document.getElementById("menu_style").menu="....

and fill out the contents of the .menu attribute with the changed opacity value. However, when I try this nothing gets changed and my menu remains invisible :mad: . I have read some tutorials on w3schools about this but they don't go into the specifics of changing custom styles with DOM. Any help with this little snag would be appriciated.

Steven.

[tgreer]

I believe "CSS" filters are an IE-only, non-standard, non-compliant "thing".

Regardless, you cannot change the CSS declaration itself. CSS Stylesheets are not part of the DOM. You can, however, use JavaScript to change the style of an individual HTML element. Since styles cascade, the element will use the original class/id declaration except when specifically overriden by an inline style.

So, rather than trying to get the "CSS element", get a handle to the actual styled HTML element, and interact with it.

[madmital]

CSS "filters" are IE-only.

Use the "visibility" att.

Something along the lines of this should work:

<style>
#dropdownmenu { position: absolute; top: 20px; left: 20px; visibility : hidden; }
</style>
<javascript>
   function showDropDown()
  {
    document.getElementById("dropdownmenu").style.visibility = "visible";
  }
</javascript>

<a onMouseOver="showDropDown()">show me now</a>

<div id="dropdownmenu">
item
item
item
</div>

[Mushy-pea]

Thanks for the help. Now it works! It's a good job somone mentioned that "filter: alpha" is IE only or I'd have left a somewhat large glitch on my site.

Steven.