Question

Hi I am trying to dynamicly change the height of a division using JavaScript but I can only get the JS to read the Height element of the div if it defined using style tags inside the HTML mark-up.

If its in a separate sheet it returns NaN, I’m assuming because it can’t find a value and is actually returning null (I’m using ParseInt to make it work).

Here is the HTML:

<div id="dropdown_container">
    <div id="dropdown" style="height:100px;">
    a
    </div>
</div>

(Wish the HTML stlye markup)

And here is the JS:

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.style.height.substring(0,(el.style.height.length)-2));
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}

Does anyone know of a reason for this (mis?)functionaility. And a solution for it?

Here is a jsFiddle.

Try moving the height over to the CSS to see the issue i’m having.

Answer 1

ParseInt is missing it’s radix.

You say:

I can only get the JS to read the Height element of the div if it
defined using style tags inside the HTML mark-up

Now you are only reading the div’s attribute style. Which you set inline. So if you remove that, than you can not read it anymore. Make sense?

You want to get the computed height. Try: .offsetHeight

Basis of test-case to play with inc. fixed radix. this fiddle

UPDATE: tada: fixed, see this updated fiddle

function clickDown() {
    var el = document.getElementById('dropdown');
    var maxHeight = 200;
    getHeight = parseInt(el.offsetHeight,10);
    console.log(getHeight);
    getHeight += 2;
    el.style.height = getHeight + 'px';
    timeoutHeightInc = setTimeout('clickDown()',15);
    if(getHeight >= maxHeight){
        clearTimeout(timeoutHeightInc);

    }
}