How to compute the height of an element in jQuery?

Question

I am using an accordion which was written by somebody else. When the accordion is initially displayed, each rows' initial heights are persisted, and then their heights are set to 0. And then when the row becomes visible, its height is restored to its original value.

But in my case, the accordion's heights will change because I am asynchronously populating them with data. So, when the row becomes visible, I'd like to calculate the rows' height based on it's new constents. However, because its height was set to 0 with .css('height', 0), $(elem).height() gives 0.

Is there a way to calculate the height of the element, rather than just retrieve it's css height value?

have you tried innerHeight ?

Semen Tykhonenko
– Semen Tykhonenko

2015-05-27 15:13:52 +00:00
Commented May 27, 2015 at 15:13 — Semen Tykhonenko
– Semen Tykhonenko, Commented May 27, 2015 at 15:13
have you tried outerHeight ?

lmgonzalves
– lmgonzalves

2015-05-27 15:16:58 +00:00
Commented May 27, 2015 at 15:16 — lmgonzalves
– lmgonzalves, Commented May 27, 2015 at 15:16
have you tried intermediateHeight ?

Abdul Ahmad
– Abdul Ahmad

2015-05-27 15:29:14 +00:00
Commented May 27, 2015 at 15:29 — Abdul Ahmad
– Abdul Ahmad, Commented May 27, 2015 at 15:29

Vaune · Accepted Answer · 2015-05-27 15:28:58Z

Use jQuery's innerHeight function to get the calculated height of an element, sans border and margin.

var height = $('#myElement').innerHeight();

Edit: Use jQuery's outerHeight function to get the calculated height of an element, including padding, border and optionally the margin.

//without margin var height = $('#myElement').outerHeight(); //with margin var height = $('#myElement').outerHeight(true);

Edit 2: You may also compare these results with native Javascript.

var el = document.getElementById('myElement'); var height = el.offsetHeight;

all 3 of these give 0, presumably for the same reason as .height(), that the css height has been set to 0. I was hoping there would be a way to calculate the height based on the current contents?
If you are loading elements via AJAX, ensure that the element exists before trying to find its size. Try calculating the height in the success callback of the AJAX function, as the element must be visible before the functions can work.

richardj · Accepted Answer · 2015-05-27 15:26:33Z

You can also use the Javascript offsetHeight function.

var elementHeight = document.getElementById(id_attribute_value).offsetHeight;

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

Collectives™ on Stack Overflow

How to compute the height of an element in jQuery?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related