The DOM offsetHeight property is used to return the layout height of an element as an integer. It is measured in pixels. It includes height, border, padding, and horizontal scrollbars but not margin. If the element is hidden then it returns 0.
Syntax
element.offsetHeight Return Value: It returns the layout height of an element as an integer.Â
Example 1: In this example, we will use DOM offsetHeight Property
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetHeight Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<p id="sudo"></p>
</div>
<!--Driver Code Ends-->
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
let element = document.getElementById("GFG");
let txt = "Height including padding and border: "
+ element.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: In this example, we will use DOM offsetHeight Property
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style offsetHeight Property
</title>
<style>
#GFG {
height: 150px;
width: 300px;
padding: 10px;
margin: 15px;
background-color: green;
}
</style>
</head>
<body>
<h2>DOM offsetHeight Property</h2>
<div id="GFG">
<b>Information about this div:</b>
<br>
<p id="sudo"></p>
</div>
<!--Driver Code Ends-->
<button type="button" onclick="Geeks()">
Submit
</button>
<script>
function Geeks() {
let element = document.getElementById("GFG");
let txt = "";
txt += "Height with padding: "
+ element.clientHeight + "px<br>";
txt += "Height with padding and border: "
+ element.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It does not include margins or the height of pseudo-elements (::before / ::after). If the element (or any ancestor) has display: none, it returns 0.This makes it the classic way to get the actual space an element occupies in the document flow.
- It always returns an integer (rounded) and reflects layout size rather than visual/transformed size Unlike getBoundingClientRect().height (which can return a precise float and respects CSS transforms like scale()), offsetHeight rounds to the nearest integer and reports the elementâs layout height (pre-transform).
