Is there a way to get the height of a dynamicly inserted/created div that initially has display=none, before showing it?

Is there a way to get the height of a dynamicly inserted/created div that initially has di开发者_如何学JAVAsplay=none, before showing it?

Dont display:none it..... Just append it to an absolutely positioned element offset by -9999px or so. Alternatively use visibility:hidden.

Typcially you hide it by positioning it outside the viewable area of a container with overflow: hidden;.

Since its height might be affected by the actual placement in the DOM, it is quite difficult to give an accurate answer.

Only form you can reliable tell is to use display:block and visibility:hidden. But keep in mind that it will take up the space even before showing it.

The method to use in this case is the .height()

visibility:hidden;
position:absolute;

hidden to make invisible, absolute to take out of the document flow. this still renders the content and assigns height which display:none doesn't do.

if the height is set in css then i think all you should have to do is $('#elemID').css('height').

I believe when an element has display: none; it doesn't have any height. One option would be to use visibilty:hidden instead then use $('elem').height()

I don't think the browser will actually render the DOM while a script is running, at least not in my experience.
I've always added the element in it's final position, measured it and then hidden it.
I've never noticed it flashing into existence momentarily. I'd be interested to know what others think.

Something like:

jQuery

var el = $('<div/>', {
    html: 'hello',
    css: {
        padding: '10px'
    }
});
var height = el.appendTo( $(document.body) ).height();
el.hide(); 

Plain

var el = document.createElement( 'div' );
el.style.padding = '10px';
el.innerHTML = 'hello';
document.body.appendChild( el );
var height = el.clientHeight;
el.style.display = 'none';