Get div height with plain JavaScript
JavascriptHtmlCssJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
var clientHeight = document.getElementById('myDiv').clientHeight;
or
var offsetHeight = document.getElementById('myDiv').offsetHeight;
clientHeight
includes padding.
offsetHeight
includes padding, scrollBar and borders.
Solution 2 - Javascript
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}`);
}
Solution 3 - Javascript
var element = document.getElementById('element');
alert(element.offsetHeight);
Solution 4 - Javascript
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.
Solution 5 - Javascript
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.
Solution 6 - Javascript
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'
Solution 7 - Javascript
try
myDiv.offsetHeight
console.log("Height:", myDiv.offsetHeight );
#myDiv { width: 100px; height: 666px; background: red}
<div id="myDiv"></div>
Solution 8 - Javascript
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>
Solution 9 - Javascript
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;
}
}
Solution 10 - Javascript
One option would be
const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);
Solution 11 - Javascript
<div id="item">show taille height</div>
<script>
alert(document.getElementById('item').offsetHeight);
</script>
[Jsfiddle][1] [1]: http://jsfiddle.net/mouadh/ef6v7a36/
Solution 12 - Javascript
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
Solution 13 - Javascript
- 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>