Home » Html » How to get height of <div> in px dimension

How to get height of <div> in px dimension

Posted by: admin November 29, 2017 Leave a comment

Questions:

I have used jQuery library to find out height of a div.

Below is my div element with attributes :

<DIV id="myDiv" style="height:auto; width:78;overflow:hidden"> Simple Test</DIV>

Below is my jQuery code to get height of <div>

var result = $("#myDiv").css('height');
alert(result);

After executing above statement I am getting result as “auto”. Actually this is I am not expecting, instead of that I want the result in px dimension.

Answers:

Use .height() like this:

var result = $("#myDiv").height();

There’s also .innerHeight() and .outerHeight() depending on exactly what you want.

You can test it here, play with the padding/margins/content to see how it changes around.

Questions:
Answers:

Although they vary slightly as to how they retrieve a height value, i.e some would calculate the whole element including padding, margin, scrollbar, etc and others would just calculate the element in its raw form.
You can try these ones:

javascript:

var myDiv = document.getElementById("myDiv");
myDiv.clientHeight;
myDiv.scrollHeight;
myDiv.offsetHeight;

or in jquery:

$("#myDiv").height();
$("#myDiv").innerHeight();
$("#myDiv").outerHeight();

Questions:
Answers:

Use height():

var result = $("#myDiv").height();
alert(result);

This will give you the unit-less computed height in pixels. “px” will be stripped from the result. I.e. if the height is 400px, the result will be 400, but the result will be in pixels.

If you want to do it without jQuery, you can use plain JavaScript:

var result = document.getElementById("myDiv").offsetHeight;