如何计算内部有一些文本和固定宽度的div的高度

Question

I have the following code:

<div class="content">
                        <a href="/profile/Nat's Rare &amp; Raw" class="link-name"><strong>Irene Natalia</strong></a>
                        Hooray! we'll proceed with the shipping and inform the tracking # tomorrow :) Thank you, Angel! :)

                        <br>
                        <span class="date">7 days ago</span>
                    </div>

I wanted to know the height of this div from using javascript. Is there a way to do so? This div has a fixed sized width (in this case 150px). I just wanted to know the height of the div say the text changed. Preferred method is via jQuery but javascript is fine as well

EDIT:

A very important note here is that this is a calculation before the div is being rendered. I am basically creating a pinterest layout and I need to calculate the height of the comments in the item card so that masonry can lay it out first before the image is loaded.

Answer 1

Javascript:

element.offsetHeight;

This gives the height of an element

See about offsetHeight here and this is pure javascript.

jQuery:

$elem.height(); - gives height of the element without padding , border and margin

$elem.innerHeight(); - gives height including padding

$elem.outerHeight(true); - gives height including padding, border and margin

EDIT:

If you want to find the height of the element before it is rendered , then i can give you one of many possible solutions

1. Append the element to the body with respective innerHTML's
2. Find the height using any of the above methods
3. Now,remove the element and of course , you found the height & element is not there

See Fiddle : To get an element's rendered height

Answer 2

jQuery

var height = $('.content').height();
console.log(height);

Vanilla JS

var height = document.getElementsByTagName('content').offsetHeight
console.log(height);

Answer 3

.height()

Description: Get the current computed height.

• .height() - jQuery API Documentation

---

.innerHeight()

Description: Get the current computed height, including padding but not border.

• .innerHeight() - jQuery API Documentation

---

.outerHeight()

Description: Get the current computed height, including padding, border, and optionally margin.

• .outerHeight() - jQuery API Documentation

Answer 4

In jQuery: height will give the height without border or padding, innerHeight gives the height including padding but without border and outerHeight gives height with border and padding with the option to include margin as well.

I vanillaJS, as Prasath K pointed out, offsetHeight will give you the height including padding and border.

There isn't really a way to calculate height of an element that is not in the dom. You can add it somewhere in the dom, calculate the height using one of the above methods and then remove it again.

Answer 5

Try like . height() like

var div_hght = $('.content').height();
alert(div_hght);

Answer 6

In addition to the techniques described above, in order to not have the element on screen when calculating, you can use visibility: hidden (CSS). You can't usually use display: none , because the element is usually considered to have no dimensions in that state.

You could also render to a div positioned below some obscuring element, using a negative z-index .

Answer 7

Also, the answers here forget to mention the scrollHeight property, which can be used to get the full height of a DIV (all the scrollable content inside).

To call it, you need to use an index like that:

$('#content')[0].scrollHeight;