408

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.

Dan
  • 59,490
  • 13
  • 101
  • 110
lwiii
  • 4,739
  • 6
  • 18
  • 18

13 Answers13

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

or

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

clientHeight includes padding.

offsetHeight includes padding, scrollBar and borders.

Yves M.
  • 29,855
  • 23
  • 108
  • 144
Dan
  • 59,490
  • 13
  • 101
  • 110
  • 2
    offsetheight doesnt wokr on ie10 below http://www.quirksmode.org/mobile/tableViewport_desktop.html – fearis Aug 26 '15 at 15:38
  • 5
    You could also use `scrollHeight` which includes the height of the contained document, vertical padding, and vertical borders. – Saeid Dec 24 '15 at 11:35
  • 7
    `clientHeight` also includes padding, so it's not equivalent to `$.height()` – Eevee Jan 10 '16 at 01:58
  • NOTE: This allows you to get the height of something, but you cannot change the height of your element with it. See: http://stackoverflow.com/questions/4925217/how-to-change-the-offsetheight-of-a-element-using-javascript – Ryan Smith Jul 21 '16 at 14:27
38

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}`);
}
user4617883
  • 1,277
  • 1
  • 11
  • 21
26

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);
Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
16
  1. HTMLElement.style - returns defined Style of element
  2. clientHeight - height + padding
  3. offsetHeight - height + padding + borders
  4. scrollHeight - return height + padding
  5. getBoundingClientRect() - return left, top, right, bottom, x, y, width, and height properties
  6. 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>
Sahil Thummar
  • 1,926
  • 16
  • 16
12
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.

Community
  • 1
  • 1
Keo Strife
  • 1,416
  • 3
  • 15
  • 23
5

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;

You downvoters: This answer has helped at least 5 people, judging by the upvotes I've received. If you don't like it, tell me why so I can fix it. That's my biggest pet peeve with downvotes; you rarely tell me why you downvote it.

craned
  • 2,991
  • 2
  • 34
  • 38
  • 1
    I can't see how w3schools says the other methods aren't accurate. – aknuds1 Oct 08 '15 at 13:31
  • 1
    @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. – craned Oct 13 '22 at 17:46
4

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'
cronoklee
  • 6,482
  • 9
  • 52
  • 80
3

try

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
3

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>
  • 2
    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](/help/how-to-answer). – Community Oct 07 '21 at 04:43
2

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;
        }

    }
Pedro Coelho
  • 1,411
  • 3
  • 18
  • 31
2

One option would be

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
Shivansh Narayan
  • 506
  • 6
  • 15
1
<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Bhargav Rao
  • 50,140
  • 28
  • 121
  • 140
1

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
Balaji
  • 9,657
  • 5
  • 47
  • 47