JavaScript offsetHeight

April 24, 2023

JavaScript offsetHeight

The offsetHeight property is a property of the HTML DOM that is used by JavaScript. The visible height of an element is returned in pixels, including the height of visible content, border, padding, and scrollbar if present. It is common to use offsetHeight in conjunction with offsetWidth. OffsetWidth is another property of HTML DOM, which is almost identical to offsetHeight. JavaScript uses these properties to determine the visible height and width of HTML elements.

OffsetHeight is composed of the following HTML elements:

offsetHeight = height + border + padding + horizontal scrollbar

In contrast, offsetWidth includes the following elements:

offsetWidth = width + border + padding + vertical scrollbar

Keep in mind that offsetHeight and offsetWidth do not include margin, neither top margin nor bottom margin. JavaScript uses these DOM properties to calculate the dimensions of HTML elements.

Syntax

Below is a simple syntax of offsetHeight:

element.offsetHeight

A JavaScript variable, element, holds the CSS properties values or HTML text paragraphs.

Return Values

OffsetHeight and offsetWidth return the calculated height and width of the HTML elements in pixels, respectively.

Example

<html>
<head>
<title>
offsetHeight
</title>
<style>
#IT {
height: 120px;
width: 250px;
margin: 20px;
padding: 15px;
background-color: grey;
}
</style>
</head>
<script>
function getOffset() {
var eleValue = document.getElementById("IT");
var txt = "Height of the elements paragraph along with padding and border in pixels is: " + eleValue.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
<body>
<h2> HTML DOM offsetHeight Property example </h2>
<div id= "IT">
<b> Information about this div tab: </b>
<p id= "sudo"> </p>
</div>
<button type="IT" onclick="getOffset()"> Submit </button>
</body>
</html>

OUTPUT :

The following output contains a paragraph highlighted in grey and a submit button. Calculate the offsetHeight of this paragraph by clicking on the Submit button.