Javascript clientHeight and alternatives

Question

I'm currently trying to change the Javascript function, which is "slides" in a <div. script, because you need to determine the height of the div, so it is mostly useless for dynamically populated <div> s. I found some text in the clientHeight property in javascript, but it doesn't seem to support <div> s with the display set to none (which is the method used to move the div in). This makes sense, since the height of this div in the client window is nothing.

Basically I was wondering what other methods you know, or if there is a way around the clientHeight = 0 when displaying: none.

Thanks!

Oh, and here is the function I'm using:

function getDivHeight(objName) {
    return boxHeight = document.getElementById(objName).clientHeight;
}

Answer 1

A simple solution is to set the visibility to “hidden” and display “block” and measure it. However, some modern browsers will succeed in updating the page layout within this short time, and you will get an unpleasant flicker. The easiest way to overcome this is to place the element in an absolutely positioned container with an overflow set to "hidden".

Answer 2

I was fortunate enough to clone an element by moving it off the screen and then displaying it to get the height of the client:

var original = document.getElementById(some_id);
var new_item = original.cloneNode(true);
document.body.appendChild(new_item);  // item already hidden, so it won't show yet.
                                      // you may wish to validate it is hidden first
new_item.style.position = "absolute";
new_item.style.left = "-1000px";
new_item.style.display = "block";
var height = new_item.clientHeight;

: jQuery, , . jQuery "display: block; position: absolute; visibility: none", , .

, , , - , node , ... , , , node DOM, . , "display: none", . DOM ?: -)

2: , , jQuery , , , .

Answer 3

, , , .

. , , . ? . ? , div; .

"display: none" . , . : " , " display: block "? , , , , !

, "display: none" , , "display: none" . JavaScript, .

Answer 4

, , , -, , , div. , div, div 1px , . div none, , offsetHeight, , div .

!!!

Answer 5

IE scrollHeight, , .