How do I get a value from a DOM object in ECMAScript?

[dbasch]

Hello,
This is my first post :). I have been building an expandable list menu based upon the example given at:
[gazingus.org ]

I am trying to plant a cookie that will remember the expansion state of the menu. Then I can reference the cookie and apply that expansion state to the next page.
So, I need to be able to store the "value" of the 'style.display' property of the list sections.

However, I cant find any way of storing the value. I alway get a 'null' or 'undefined' when I try to reference the value. I am a fairly skilled Python programmer but the ECMAScript concept of no types is throwing me off.

I wish I could just go 'state = str(display.value)'. Hopefully this code block displays properly.

if (!document.getElementById)
 document.getElementById = function() { return null; }
function setCookie(display)
{
 var the_cookie = "wm_javascript=" + escape(display);
 document.cookie = the_cookie;
 alert("Cookie set.");
}
function readCookie()
{
 var the_cookie = document.cookie;
 var the_cookie = unescape(the_cookie);
 alert("The cookie is: " + the_cookie);
}
function initializeMenu(menuId, actuatorId) {
 var menu = document.getElementById(menuId);
 var actuator = document.getElementById(actuatorId); 
 if (menu == null ¦¦ actuator == null) return;
 if (window.opera) return; // I'm too tired
 
 actuator.onclick = function() {
 var display = menu.style.display;
 //**** Here is the part I dont get! ******
 document.write(display.value);
 
 menu.style.display = (display == "block")? "none" : "block";
setCookie(display); 
 return false;
 }
}

Can anyone tell me how to access the value of object attributes?

Thanks Everyone,
Derek Basch

[edited by: korkus2000 at 7:11 pm (utc) on Dec. 20, 2002]
[edit reason] TOS 21 [/edit]

[c3oc3o]

If I understand you correctly: Just leave out the .value! That is only for the values of form input elements, the other properties don't need that.

document.write(getElementById('foo').style.display) will output the value of the 'display' property of the element with the 'foo ' ID.

[dbasch]

Well, in case anyone is interested I figured out that I need to use the defaultView or the currentStyle property.

"CSS rules that are not part of an elements style attribute only be read by obj.style[style] after they have been set with JavaScript."

So, since the CSS rules I am dealing with are set in Javascript and are not part of the objects style attribute I must use the obj.style[style] technique.

I found the answer to this at:

[dhtmlkitchen.com...]

"It may seem obvious how to read a style, but in practice, it is no simple matter.

The function below tries to read the property from the defaultView (see w3c). Failing that, it looks to the object's currentStyle property (see IE).

In a visual browser, defaultView is the visual representation of the element's computed style after all override css has been handled by the browser.

currentStyle does not return a visual representation. With currentStyle, you will often get values such as "100%" or "auto." Such values do not help calculate the dimensions of an element."

if (!document.getElementById)
 document.getElementById = function() { return null; }
function setCookie(displayValue, menuId)
{
 var the_cookie = "wm_javascript=" + escape(displayValue + " " + menuId);
 document.cookie = the_cookie;
 alert("Cookie set.");
}
function readCookie()
{
 var the_cookie = document.cookie;
 var the_cookie = unescape(the_cookie);
 alert(the_cookie);
}
function initializeMenu(menuId, actuatorId) {
 var menu = getRef(menuId);
 var actuator = getRef(actuatorId); 
 if (menu == null ¦¦ actuator == null) return;
 if (window.opera) return; // I'm too tired 
 
 actuator.onclick = function() { 
var display = menu.style.display; 
var displayValue = getStyle(menu, 'display');  
  
  menu.style.display = (display == "block")? "none" : "block";
setCookie(displayValue, menuId);
readCookie()
window.location(menu.url); 
return false;
 }
}
function getRef(obj){
 if(typeof obj == "string")
 obj= document.getElementById(obj);
 return obj;
}
function setStyle(obj, style, value){
 getRef(obj).style[style]= value;
}
function getStyle(obj, style){
 if(!document.getElementById) return;
 
  var obj = getRef(obj);
  var value = obj.style[style];
 
 if(!value)
   if(document.defaultView)
   value = document.defaultView.
    getComputedStyle(obj, "").getPropertyValue(style);
  
   else if(obj.currentStyle)
   value = obj.currentStyle[style];
  
  return value;
}