What is offsetHeight Property in JavaScript

The “offsetHeight” returns the visible “height”, “border”, “padding”, and “horizontal scrollbar” attributes of the targeted HTML element. It is a special HTML DOM read-only property in JavaScript that can often be used with the “offsetWidth” property. It returns the calculated height as an integer value in pixels. It is beneficial for measuring the dimensions of the HTML element.

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.



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:



#Div1 {

height: 100px;

width: 250px;

margin: 15px;

padding: 15px;

border: 3px solid green;

background-color: pink;





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


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



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.


As seen, the calculated height of the given div (including padding and the border), i.e., “135px” is appended upon the button click.


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.

About the author

Talha Saif Malik

Talha is a contributor at Linux Hint with a vision to bring value and do useful things for the world. He loves to read, write and speak about Linux, Data, Computers and Technology.