How to get hidden element Height

Question

I have hidden element in my webpage, I need to get height of that element. I have tried with .clientHeight, offsetHeight, .height(), and window.getComputedStyle but non of this working in attached scenario. Is there any trick to get height without adding any plugin. fiddle

HTML

<div class="frame">
<p>some text some text some text some text</p>
</div>

Jquery

$('p').height()

@ŠimeVidas: it is my typo error, clientHeight also not working — Jitender, Oct 04 '13 at 03:12
You could temporarily remove `display:none` and add `visibility:hidden`. — Šime Vidas, Oct 04 '13 at 03:15
@RobertRozas: That won't work... it returns 39 when the actual element height is 20. — Joe Simmons, Oct 04 '13 at 03:53

Joe Simmons · Answer 1 · 2013-10-04T04:05:44.453

You could render it off-screen where the user can't see it, get its height, then restore the element back to normal.

It's better than using visibility: visible because it doesn't disrupt the positioning of the other elements on the page.

HTML

<div class="frame">
    <p>some text some text some text some text</p>
</div>

CSS

.frame {
    width: 120px;
    display: none;
}

.offscreen {
    position: fixed !important;
    left: -9999px !important;
    display: inline !important;
}

JavaScript

$('.frame').addClass('offscreen');

alert('The hieght of \'p\' is: ' + $('p').height() + 'px');

$('.frame').removeClass('offscreen');

Fiddle link: http://jsfiddle.net/HfyfX/

score 1 · Answer 2 · answered Oct 04 '13 at 04:01

1

var p = $('.frame p').clone().css('display', 'none');
$('body').append(p);
alert(p.height()); // 19
p.remove();

Working example: http://jsfiddle.net/D9PyE/

answered Oct 04 '13 at 04:01

snadon

71
1
3

Cloning it is actually a great idea. That way, you don't have to disrupt the original element, no matter how it's set up. – Joe Simmons Oct 04 '13 at 04:07

score 0 · Answer 3 · answered Oct 04 '13 at 03:25

0

Here's the FIDDLE

alert($('div').removeClass('frame').css('visibility','hidden').find('p').height());
$('div').addClass('frame').css('visibility','visible');

You can try this if you want. :)

answered Oct 04 '13 at 03:25

Vond Ritz

2,022
14
15

score 0 · Answer 4 · answered Oct 04 '13 at 04:08

0

Try this out:- http://jsfiddle.net/adiioo7/teeFD/7/

CSS:-

.frame { width:120px; visibility: hidden;}

answered Oct 04 '13 at 04:08

Aditya Singh

9,512
5
32
55

I don't like that method. It disrupts the other elements' positions ([example here](http://jsfiddle.net/K5rre/1/)) – Joe Simmons Oct 04 '13 at 04:36
1

@JoeSimmons Just add `position:absolute`, it will not affect other elements. – Aditya Singh Oct 04 '13 at 04:57
I like my method better. – Joe Simmons Oct 04 '13 at 05:10

score 0 · Answer 5 · answered Oct 04 '13 at 04:13

For get the height of hidden element you need to set CSS it :

$(".frame").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });

and after getting the height of element again set css:

$(".frame").css({'position':'static','visibility':'visible', 'display':'none'});

Try This

$(".frame").css({ 'position': 'absolute', 'visibility': 'hidden', 'display': 'block' });
alert($('p').height());
$(".frame").css({'position':'static','visibility':'visible', 'display':'none'});

How to get hidden element Height

5 Answers5

Try this out:- http://jsfiddle.net/adiioo7/teeFD/7/