This write-up illustrates the purpose, working, and practical implementation of the “offsetHeight” property in JavaScript.
How Does “offsetHeight Property” Work in JavaScript?
The “offsetHeight” property works on the height, padding, border, and horizontal scrollbar attributes except for the margins of an HTML element.
Syntax
In this syntax, “element” represents the specific HTML element whose height needs to be calculated.
Example: Applying the offsetHeight Property to Calculate the Element Height Based on the CSS Styling
In this example, the “offsetHeight” property can be used to get the height of the particular HTML element i.e., “<div>” including the allocated border, padding, and the horizontal scrollbar in pixels.
HTML Code(Including CSS Styling)
First, check the following HTML code:
<style>
#Div1 {
height: 100px;
width: 250px;
margin: 15px;
padding: 15px;
border: 3px solid green;
background-color: pink;
}
</style>
</head>
<body>
<div id="Div1" align="center">
<b>Details of this div are:</b><br>
Height: 100px<br>
Width: 250px<br>
padding: 10px<br>
margin: 15px<br>
border: 3px<br>
</div><br>
<button onclick="jsFunc()">Click it</button>
<p id="para"></p>
In the above HTML code:
- The “<style>” tag performs the CSS styling of the “<div>” element having the stated “id”.
- After that, in the “<body>” section, include the “<div>” aligned to “center” having the stated information.
- Now, create a button associated with an “onclick” event to execute the function “jsFunc()” upon the button click.
- The “<p>” tag corresponds to an empty paragraph with id “para” to display the “myFunc()” output i.e., the computed height of the div.
JavaScript Code
Now, overview the following JavaScript code:
function jsFunc() {
var elmnt = document.getElementById("Div1");
var txt = "Calculated Height of the above div(including padding and border) is: " + elmnt.offsetHeight + "px<br>";
document.getElementById("para").innerHTML = txt;
}
</script>
In the above code block:
- Define a function named “jsFunc()”.
- In Its definition, access the included “div” by its id “Div1” using the “getElementById()” method.
- After that, apply the “offsetHeight” property to calculate the height of the fetched “div” in pixels.
- Lastly, the “getElementById()” is applied again to access the empty paragraph and append the computed height value in the paragraph via the “innerHTML” property.
Output
As seen, the calculated height of the given div (including padding and the border), i.e., “135px” is appended upon the button click.
Conclusion
JavaScript provides the “offsetHeight” property to display the visible height, border, padding, and horizontal scroll bar of the HTML element. It returns the computed height as an integer value in “pixels”. In the case of the element being empty, it returns the “NULL” value instead. This blog demonstrated the usage and implementation of the “offsetHeight” property in JavaScript.
