Get div height with plain JavaScript

Question

Any ideas on how to get a div's height without using jQuery?

I was searching Stack Overflow for this question and it seems like every answer is pointing to jQuery's .height().

I tried something like myDiv.style.height, but it returned nothing, even when my div had its width and height set in CSS.

stackoverflow.com/a/10118190/1172872

sk8terboi87 ツ
– sk8terboi87 ツ

2013-03-25 13:08:18 +00:00
Commented Mar 25, 2013 at 13:08 — sk8terboi87 ツ
– sk8terboi87 ツ, Commented Mar 25, 2013 at 13:08

Yves M. · Accepted Answer · 2023-05-19 09:25:35Z

765

var clientHeight = document.getElementById('myDiv').clientHeight;

or

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

edited May 19, 2023 at 9:25

Yves M.

31.3k24 gold badges111 silver badges154 bronze badges

answered Mar 25, 2013 at 13:05

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

fearis Over a year ago

offsetheight doesnt wokr on ie10 below quirksmode.org/mobile/tableViewport_desktop.html

Saeid Over a year ago

You could also use scrollHeight which includes the height of the contained document, vertical padding, and vertical borders.

Ryan Smith Over a year ago

NOTE: This allows you to get the height of something, but you cannot change the height of your element with it. See: stackoverflow.com/questions/4925217/…

user4617883 · Accepted Answer · 2020-07-22 05:54:48Z

Another option is to use the getBoundingClientRect function. Please note that getBoundingClientRect will return an empty rect if the element's display is 'none'.

Example:

var elem = document.getElementById("myDiv"); if(elem) { var rect = elem.getBoundingClientRect(); console.log("height: " + rect.height); }

UPDATE: Here is the same code written in 2020:

const elem = document.querySelector("#myDiv"); if(elem) { const rect = elem.getBoundingClientRect(); console.log(`height: ${rect.height}`); }

Daniel Imms · Accepted Answer · 2013-03-25 12:59:27Z

28

jsFiddle

var element = document.getElementById('element'); alert(element.offsetHeight);

answered Mar 25, 2013 at 12:59

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Comments

Sahil Thummar · Accepted Answer · 2022-04-14 03:51:18Z

HTMLElement.style - returns defined Style of element
clientHeight - height + padding
offsetHeight - height + padding + borders
scrollHeight - return height + padding
getBoundingClientRect() - return left, top, right, bottom, x, y, width, and height properties
getComputedStyle() - returns all CSS properties of an element

// returns defined Style of element const styleHeight = document.getElementById('myDiv').style.height; console.log('style Height : ', styleHeight); // height + padding const clientHeight = document.getElementById('myDiv').clientHeight; console.log('client Height : ', clientHeight); // height + padding + borders const offsetHeight = document.getElementById('myDiv').offsetHeight; console.log('offset Height : ', offsetHeight); // height + padding const scrollHeight = document.getElementById('myDiv').scrollHeight; console.log('scroll Height : ', scrollHeight); // return left, top, right, bottom, x, y, width, and height properties const getBoundingClientRectHeight = document.getElementById('myDiv').getBoundingClientRect().height; console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight); // returns all CSS properties of an element const styleElementHeight = getComputedStyle(document.getElementById("myDiv")).height; console.log('style Element Height : ', styleElementHeight);

<div id="myDiv" style="margin:10px;padding:20px;height:200px;"> <input type="Text"> <input type="button" value="submit"> </div>

Community · Accepted Answer · 2015-05-28 04:30:35Z

var myDiv = document.getElementById('myDiv'); //get #myDiv alert(myDiv.clientHeight);

clientHeight and clientWidth are what you are looking for.

offsetHeight and offsetWidth also return the height and width but it includes the border and scrollbar. Depending on the situation, you can use one or the other.

Hope this helps.

E_net4 · Accepted Answer · 2023-09-11 13:37:22Z

6

The other answers weren't working for me. Here's what I found at w3schools, assuming the div has a height and/or width set.

All you need is height and width to exclude padding.

 var height = document.getElementById('myDiv').style.height; var width = document.getElementById('myDiv').style.width;

edited Sep 11, 2023 at 13:37

E_net4

30.6k13 gold badges118 silver badges155 bronze badges

answered Aug 13, 2015 at 21:52

craned

3,0592 gold badges36 silver badges40 bronze badges

2 Comments

aknuds1 Over a year ago

I can't see how w3schools says the other methods aren't accurate.

craned Over a year ago

@aknuds1 Never said they weren't accurate. They just weren't getting the job done for some reason so I kept looking and found this.

cronoklee · Accepted Answer · 2019-03-13 18:06:43Z

In addition to el.clientHeight and el.offsetHeight, when you need the height of the content inside the element (regardless of the height set on the element itself) you can use el.scrollHeight. more info

This can be useful if you want to set the element height or max-height to the exact height of it's internal dynamic content. For example:

var el = document.getElementById('myDiv') el.style.maxHeight = el.scrollHeight+'px'

Mamedul Islam · Accepted Answer · 2021-10-07 02:54:24Z

Best way is -

var myDiv = document.getElementById('myDiv'); var myDivWidth = myDiv.clientWidth || myDiv.offsetWidth || (myDiv.getBoundingClientRect()).width; var myDivHeight= myDiv.clientHeight || myDiv.offsetHeight || (myDiv.getBoundingClientRect()).height; console.log("Width: "+ myDivWidth + "px"); console.log("Height: "+ myDivHeight + "px");

<div style="padding: 50px; margin: 8px auto; outline: 1px solid green;"> <div id="myDiv" style="width: 100%; height: 256px; padding: 50px; margin: 4px; background: #000000; color: #ffffff; outline: 1px solid red;"> This is "#myDiv" <br> Width: 100% <br> Height: 256px </div> </div>

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Kamil Kiełczewski · Accepted Answer · 2019-04-17 04:57:21Z

try

myDiv.offsetHeight

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Pedro Coelho · Accepted Answer · 2019-06-14 17:48:10Z

Here's one more alternative:

var classElements = document.getElementsByClassName("className"); function setClassHeight (classElements, desiredHeightValue) { var arrayElements = Object.entries(classElements); for(var i = 0; i< arrayElements.length; i++) { arrayElements[i][1].style.height = desiredHeightValue; } }

Shivansh Narayan · Accepted Answer · 2019-12-19 17:39:20Z

One option would be

const styleElement = getComputedStyle(document.getElementById("myDiv")); console.log(styleElement.height);

Bhargav Rao · Accepted Answer · 2016-12-06 11:11:36Z

1

<div id="item">show taille height</div> <script> alert(document.getElementById('item').offsetHeight); </script>

Jsfiddle

edited Dec 6, 2016 at 11:11

Bhargav Rao

52.6k29 gold badges130 silver badges142 bronze badges

answered Dec 6, 2016 at 10:30

user3556121

211 bronze badge

Comments

Balaji · Accepted Answer · 2021-04-05 18:17:36Z

javascript height computation

include padding

use clientHeight

element.clientHeight

use offsetHeight

include padding,borders,border_width

element.offsetHeight

use el.style.height

It return given height only(must have manual height eg: <div style="height:12px"></div> otherwise it return empty result

element.style.height

use getBoundingClientRect

includes padding,border,border_width

elem.getBoundingClientRect(); elem.height

Collectives™ on Stack Overflow

Get div height with plain JavaScript

13 Answers 13

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

3 Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Linked

Related