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

Question

Is there a way to get the height of a dynamically inserted / created div that originally had display = none before showing it?

Answer 1

Dont display:noneit ..... Just add it to an absolutely positioned element, offset by -9999px or so. Use as an alternative visibility:hidden.

Answer 2

You usually hide it by placing it outside the visible area of ​​the container with overflow: hidden;.

Answer 3

DOM, .

, , display:block visibility:hidden. , .

.height()

Answer 4

visibility:hidden;
position:absolute;

, , , . , display:none .

Answer 5

​​ css, , , , $('# elemID'). css ('height').

Answer 6

, : none; . - visibilty: hidden $ ('elem'). height()

Answer 7

I don't think the browser will actually display the DOM while the script is running, at least not in my experience.
I always added an element to its final position, measured it, and then hid it.
I never noticed that it flashed instantly. I would be interested to know what others think.

Sort of:

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';