how to calculate the height of a div with some text inside and a fixed width

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