To get the height of an element, there are five common methods in JavaScript. Lets see the differences between each and when they should be used. Only the last method gives the correct rendered height instead of the layout height.
- style.height
- jQuery( height, innerHeight, outerHeight )
- clientHeight, offsetHeight, scrollHeight
- getComputedStyle
- getBoundingClientRect().height
Rendered height is the height that the element gets finally after all the styles and transformations are applied on that element. For example, An element has height of 100px and then gets a transform:scale(0.5). Its rendered height is 50px (after the transformation) and layout height is 100px.
style.height We can use style.height on any selected element and it will return its height. Does not include the padding, border or margin. Italways return the height along with the specific unit.
Note: Only works if we explicitly set the height as inline using the style attribute in HTML.
Syntax:
let height = document.getElementById("someId").style.height;Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<h1>
style.height without
inline style
</h1>
</div>
<div id="div2" style="height: 100px;">
<h1>style.height with inline style</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").style.height);
alert(document.getElementById
("div2").style.height);
}
</script>
</body>
</html>
Output:
It returns empty string for “div1” and it returns “100px” for “div2”
- For “div1”:
- For “div2”:
Conclusion: It returns whatever height is specified in inline style attribute only. It does not factor in any transformations, like scale. It is not reliable and should not be used as inline styles are not ideal.
jQuery(height, innerHeight, outerHeight)
height() It returns the current height of the element. It does not include the padding, border or margin. It always returns a unit-less pixel value.
Note: The height() will always return the content height, regardless of the value of CSS box-sizing property.
Syntax:
let height = $("#div1").height();
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
}
</style>
<script src=
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").height</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").height());
}
</script>
</body>
</html>
Output:
It returns unit-less pixel value as 100.
Output:
innerHeight() It returns the current height of the element including the top and bottom padding but not border. It always returns a unit-less pixel value.
Syntax:
let height = $("#div1").innerHeight();
Example 3:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</style>
<script src=
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").innerHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").innerHeight());
}
</script>
</body>
</html>
Output:
It returns 120 which is (10(top padding) + 100(content height) + 10(bottom-padding))
outerHeight() It returns the current height of the element including the padding, border and margin optionally. It always returns a unit-less pixel value.
Syntax:
let height = $("#div1").outerHeight(); let height = $("#div1").outerHeight();
Example 4:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
margin: 5px;
}
</style>
<script src=
</script>
</head>
<body>
<div id="div1">
<h1>$(".class").outerHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert($("#div1").outerHeight());
}
</script>
</body>
</html>
Output:
(1(top border)+ 10(top padding)+ 100(content height)+1 0(bottom-padding)+ 1(bottom border)
Note: The value reported by height(), innerHeight() and outerHeight() is not guaranteed to be accurate when the element or its parent is hidden. To get accurate results, ensure the element is visible before using these methods. jQuery will attempt to temporarily show and then re-hide an element in order to measure its dimensions, but this is unreliable and (even when accurate) can significantly impact page performance. This show-and-rehide measurement feature may be removed in a future version of jQuery.
Conclusion:
// If you need height of div excluding margin/padding/border$('#div1').height();// If you need height of div with padding but without border + margin$('#div1').innerHeight();// If you need height of div including padding and border$('#div1').outerHeight();// For including border + margin + padding, can use$('#div1').outerHeight(true);All these return only the layout height, not the rendered height.
clientHeight, offsetHeight, scrollHeight
clientHeight() It returns the height of the displayed content from the element (including vertical padding but not border or margin or scrollbar). It always returns an integer value in pixels. If element is hidden, then 0 is returned. If its a scrollable element, then it will only give the height of the visible part.
Syntax:
let height = document.getElementById("div1").clientHeight;
Example 5:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
<script src=
</script>
</head>
<body>
<div id="div1">
<h1>.clientHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").clientHeight);
}
</script>
</body>
</html>
Output:
It returns 120 which is (10(top padding) + 100(content height) + 10(bottom-padding))
Conclusion: If we want to find the height of the actual displayed content use clientHeight. It returns the layout height of the currently visible part of the element which is rounded to an integer value even if the result is a fraction.
offsetHeight() It returns the height that the element occupies including the vertical padding, border and scrollbars (if any). It does not include the margin. It always returns an integer value in pixels. If element is hidden, then 0 is returned.
Note: It does not include the height of pseudo elements such as ::after or ::before
Syntax:
let height = document.getElementById("div1").offsetHeight;
Example 6:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.offsetHeight</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").offsetHeight);
}
</script>
</body>
</html>
Output:
It returns 122 which is (1(border-top) + 10(padding-top )+ 100(contentHeight) + 10(padding-bottom) + 1(border-bottom))
Conclusion: If you need to know the total height of an element occupies including the width of the visible content, scrollbars (if any), padding, and border, we can use offsetWidth. It returns the layout height of the currently visible part of the element which is rounded to an integer value.
scrollHeight() It returns the height of the entire content of an element, even if only part of it is visible due to scrollbars. It always returns an integer value in pixels. If the element is hidden, then 0 is returned.
Its similar to clientHeight as it includes the element and its padding, but not its border, margin or horizontal scrollbar (if present). It can also include the height of pseudo-elements such as ::before or ::after. If the element’s content can fit without a need for vertical scrollbar, its scrollHeight is equal to clientHeight.
Syntax:
let height = document.getElementById("div1").scrollHeight
Example 7:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
.div0 {
height: 50px;
}
#div1 {
height: 100px;
padding: 10px;
overflow: auto;
}
</style>
</head>
<body>
<div id="div1">
<h1>.offsetHeight</h1>
As the placement season is back
so are we to help you ace the
interview.We have selected some
most commonly asked and must do
practice problems for you. You
can also take part in our mock
placement contests which will
help you learn different topics
and practice at the same time,
simulating the feeling of a
real placement test environment.
There are many important things
that should be taken care of,
like user friendliness,modularity,
security, maintainability, etc.
Why to worry about performance?
The answer to this is simple, we
can have all the above things
only if we have performance. So
performance is like currency through
which we can buy all the above things.
Another reason for studying performance
is – speed is fun! To summarize,
performance == scale. Imagine a text
editor that can load 1000 pages,
but can spell check 1 page per minute
OR an image editor that takes 1 hour
to rotate your image 90 degrees left
OR … you get it. If a software feature
can not cope with the scale of tasks
users need to perform – it is as good
as dead.
</div>
<button onclick="alertHeight()">
Get Height</button>
<script>
function alertHeight() {
alert(document.getElementById
("div1").scrollHeight);
}
</script>
</body>
</html>
</div
Output:
(1(border-top) + 10(padding-top) + entireContent(visible and not visible) + 10(padding-bottom)+ 1(border-bottom))
Conclusion: If you need to know the actual size of the content, regardless of how much of it is currently visible, use scrollHeight. It includes the elements padding but not margin, border or scrollbar (if present). It returns rounded integer if the height is in fraction.
getComputedStyle() Method: The getComputedStyle() method basically allows us to retrieve the resolved CSS values of different properties. It returns a CSSStyleDeclaration object. The computed style is used in displaying the element, after “stylings” from multiple sources have been applied.
getComputedStyle().height It will return the layout height specified not the rendered height. It returns fractional pixel value. It is a resolved value, so if we use 100%, it will return the equivalent resolved value in pixel. It only gives the content height. If we want, we can access each CSS property like margin-top, margin-bottom, padding-top, padding-bottom, border-top, border-bottom individually and add them as required.
Syntax:
let height = getComputedStyle(document.getElementById("div1")).height;or
let height = getComputedStyle(document.getElementById("div1")).getPropertyValue("height");let marginTop = getComputedStyle(document.getElementById("div1")).getPropertyValue("margin-top");let borderBottom = getComputedStyle(document.getElementById("div1")).getPropertyValue("border-bottom");
Example 8:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.getComputedStyle(el).height</h1>
</div>
<button onclick="alertHeight()">
Get Height</button>
<script>
function alertHeight() {
alert(getComputedStyle(
document.getElementById("div1"))
.getPropertyValue("height"));
}
</script>
</body>
</html>
Output:
100px
Conclusion: It allows for full control on what is selected but returns only the layout dimensions. It does not cause in any transforms. We can also target pseudo-elements if needed, by passing a second argument inside getComputedStyle() and get its specific styles as well.
Note: Different properties of the getComputedStyle() function have different support in different browsers.
getBoundingClientRect() Method: The getBoundingClientRect().height returns the height that the element occupies including the vertical padding, border and scrollbars (if any). It do not include the margin. Its similar to offsetHeight but it returns a fractional value instead and also displays the rendered height and not the layout height.
Syntax:
let height = document.getElementById("div1").getBoundingClientRect().height;
Example 9:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
div {
border: 1px solid black;
text-align: center;
margin-bottom: 16px;
color: green;
}
#div1 {
height: 100px;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">
<h1>.getBoundingClientRect().height</h1>
</div>
<button onclick="alertHeight()">
Get Height
</button>
<script>
function alertHeight() {
alert(document.getElementById("div1").
getBoundingClientRect().height);
}
</script>
</body>
</html>
Output:
It returns 122 which is (1(border-top) + 10(padding-top) + 100(contentHeight) + 10(padding-bottom) + 1(border-bottom))
Conclusion: It is similar to offsetHeight but returns fractional value. It also gives rendered height instead of layout height. If we apply transform scale, the returned value will be different now.
Use getBoundingCLientRect().height If you need the final rendered height. Else you can use all other methods except style.height according to the requirement.
My Personal Notesarrow_drop_up
Last Updated :12 Apr, 2023
Like Article
Save Article
Similar Reads
1.How to switch CSS class between buttons rendered with map()?
2.How to force child div to be 100% of parent div's height without specifying parent's height?
3.HTML width/height Attribute vs CSS width/height Property
4.How to Make body height to 100% of the Browser Height ?
5.How to get the element's actual width and height in JavaScript ?
6.How to get the width and height of an element in jQuery ?
7.
8.How to get the width and height of an image ?
9.How to get the height of device screen in JavaScript ?
10.How to get the div height using JavaScript ?
Related Tutorials
1.Learn Data Structures with Javascript | DSA Tutorial
2.Onsen UI
3.React Material UI
4.NuxtJS
5.D3.js
Previous
How to create mat-button-toggle-group as read only mode in AngularJS ?
Next
SVG FEGaussionBlur.stdDeviationY Property
Article Contributed By :
Vote for difficulty
Article Tags :
- HTML-Questions
- JavaScript-Questions
- Picked
- HTML
- JavaScript
- Web Technologies
Practice Tags :
- HTML
Report Issue
FAQs
How do you find the rendered height of an element? ›
The HTMLElement. offsetHeight read-only property returns the height of an element, including vertical padding and borders, as an integer. Typically, offsetHeight is a measurement in pixels of the element's CSS height, including any borders, padding, and horizontal scrollbars (if rendered).
How to get the rendered height of an element in JavaScript? ›You can use . outerHeight() for this purpose. It will give you full rendered height of the element. Also, you don't need to set any css-height of the element.
What method is useful to get the width and height of the rendered element? ›Use offsetWidth & offsetHeight properties of the DOM element to get its the width and height.
Can you get the height of an element in CSS? ›Unfortunately, it is not possible to "get" the height of an element via CSS because CSS is not a language that returns any sort of data other than rules for the browser to adjust its styling.
What is the formula for height of an object? ›1) The height of an object, h(t), is determined by the formula h(t) = -16t2+ 256t, where t is time, in seconds. Find the maximum height of the object and at what time the object hits the ground.
How to get height of an element using selenium? ›The getSize() method
This class contains the width and height of the target WebElement. The following is the code to get the width and height of the Search box: WebElement searchBox = driver. findElement(By.name("q"));System.