Javascript and Height Style

Something's off

[Stex]

Quick overview:
Why, when I set object.style.height to a value does the value get set but nothing changes onscreen? In both mozilla and Internet Explorer. There are no errors caught by either browser. [Script at bottom of post]

I'm trying to make a script that gracefuly expands a div to the height it should be (with the div's height set to auto). I've got over the auto by using offsetHeight and skipping the expand if the browser can't use offsetHeight.

I have however one problem. Using alert boxes to debug the script thisnav.style.height does not exist (fair enough. Oh, thisnav is made from document.getElementById) so I set it to 1px. I then read it and yes, thisnav.style.height is 1px. But the height of the div onscreen does not change. Nor does the offsetHeight.

However, when I set thisnav.style.display to visiable or anything else it works perfectly. Any clues as to what's wrong? Here's the script:

function openNav(cur_id) {
 var thisnav; var get_to; var value;
 value = 'desc_' + cur_id;
 thisnav = document.getElementById(value);
 thisnav.style.display = "inline";
 get_to = thisnav.offsetHeight;
 alert(thisnav.style.height);
 if (get_to > 0) {
 thisnav.style.height = "1px";
 // This is going to be a setInterval but for now it's not:
 expandNav(value,get_to);
 }
}

function expandNav(value,get_to) {
 var thisnav = document.getElementById(value);
 if (thisnav.offsetHeight < get_to) {
 thisnav.style.height = (thisnav.offsetHeight + 1) + "px";
 alert(document.getElementById(value).style.height);
 } else {
 alert(thisnav.offsetHeight + " is " + get_to);
 }
}

[ajkimoto]

Stex,

It seems to me that inline elements do not have a height css attribute (unlike block elements, which do have a height css attribute). If you want to use the height attribute, you will have to change the display attribute of thisnav to 'block'.

Hope this helps,

ajkimoto