The offsetHeight is a property of the HTML Document Object Model (DOM) utilized in JavaScript. It provides the total visible height of an element in pixels, encompassing the height of the displayed content, border, padding, and any scrollbar that may be present. Typically, offsetHeight is employed alongside the offsetWidth property. The offsetWidth is another property within the HTML DOM, closely related to offsetHeight. These properties serve the purpose of allowing JavaScript to determine the visible dimensions—height and width—of HTML elements.
The offsetHeight property comprises the following HTML components:
offsetHeight = height + border + padding + horizontal scrollbar
Conversely, the offsetWidth property takes into account the following elements:
offsetWidth = width + border + padding + vertical scrollbar
It is crucial to note that both offsetHeight and offsetWidth exclude margin measurements, which means they do not account for either the top or bottom margins. These specific DOM properties are utilized within the JavaScript programming language to determine the pixel dimensions of HTML elements.
Utilizing the diagram provided below, you can gain a clearer understanding of offsetHeight and offsetWidth:
Browser support
The offsetHeight property of the DOM is compatible with various web browsers, including Chrome and Internet Explorer. Below is a list of browsers that provide support for both the offsetHeight and offsetWidth properties.
| Browser | Chrome | Internet Explorer | Firefox | Opera | Safari | Edge |
|---|---|---|---|---|---|---|
| offsetHeight support | Yes | Yes | Yes | Yes | Yes | Yes |
Syntax
Below is a simple syntax of offsetHeight:
element.offsetHeight
In this context, the variable named element is established in JavaScript to store values related to CSS properties or the text content of an HTML paragraph.
Return Values
The properties offsetHeight and offsetWidth provide the computed height and width of HTML elements in pixels, correspondingly.
Examples
Here is a compilation of several examples. These will aid us in understanding how the offsetHeight property is utilized and functions.
Example 1
<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#JTP {
height: 120px;
width: 250px;
margin: 20px;
padding: 15px;
background-color: yellow;
}
</style>
</head>
<script>
function getInfo() {
var eleValue = document.getElementById("JTP");
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= "JTP">
<b> A basic information about this div tab: </b>
<p id= "sudo"> </p>
</div>
<button type="JTP" onclick="getInfo()"> Submit </button>
</body>
</html>
Output
Observe the output below, which includes a paragraph highlighted in yellow, along with a submit button. Click on the Submit button to compute the offsetHeight of this highlighted paragraph.
Output before clicking on Submit button
Output after clicking on Submit button
The computed offsetHeight will be shown within the area highlighted in yellow.
Example 2
In this instance, we will determine the offsetHeight for a paragraph featured in this example along with its associated CSS styles. Keep in mind that the offsetHeight does not account for the margin.
<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#PStyle {
height: 220px;
width: 320px;
margin: 20px;
padding: 15px;
background-color: pink;
}
</style>
</head>
<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
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>
<h3> HTML DOM offsetHeight Property Example 2 </h3>
<div id= "PStyle">
<p> In this example, we will calculate the offset height for this paragraph. We have also provided CSS styling to this paragraph. This offsetHeight will include the height of text, padding, border except margin taken by this paragraph. </p>
<b> OffsetHeight of this div tab paragraph: </b>
<p id= "sudo"> </p>
</div>
<button type= "button" onclick = "getInfo()"> Calculate offsetHeight </button>
</body>
</html>
Output
Observe the output presented below, which features a paragraph highlighted in pink along with a button labeled Submit. To calculate the offsetHeight of this paragraph, please click the Calculate offsetHeight button.
Output prior to pressing the Calculate offsetHeight button
Result displayed after selecting the Calculate offsetHeight button
The computed offsetHeight will be shown within this area highlighted in pink. In the screenshot provided below, it is evident that the offsetHeight for the specified paragraph measures 230px.
Example 3 without CSS styling
Here is an additional illustration of how to compute the offsetHeight. We have intentionally omitted any CSS properties such as height, width, margin, padding, and so forth, with the sole exception of the background color. Consequently, the paragraph will consist of a straightforward text block without any applied styles.
<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#PStyle {
background-color: orange;
}
</style>
</head>
<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
var txt = "Height of the elements in paragraph calculated as pixels is: " + eleValue.offsetHeight + "px";
document.getElementById("sudo").innerHTML = txt;
}
</script>
<body>
<h3> HTML DOM offsetHeight Property Example 3 </h3>
<div id= "PStyle">
<p> In this example, we will calculate the offset height of this given paragraph. We have jusr included background color in CSS styling not height, width, margin, or padding to this paragraph. So, the offsetHeight will be calculted for the height of text taken by this paragraph. </p>
<b> OffsetHeight of this div tab paragraph: </b>
<p id= "sudo"> </p>
</div>
<button type= "submit" onclick = "getInfo()"> Calculate offsetHeight </button>
</body>
</html>
Output
Observe the output provided below, which features a paragraph highlighted in orange along with a button labeled "Calculate offsetHeight." By clicking on this button, you will be able to determine the offsetHeight of the specified paragraph.
Before clicking on Calculate offsetHeight button
After clicking on Calculate offsetHeight button
In the screenshot provided below, it is evident that the offsetHeight for the specified paragraph measures 88px.
Calculate both offsetHeight and offsetWidth
In this illustration, we will determine the values of both offsetHeight and offsetWidth for a paragraph element contained within a div tab. This will help you comprehend the distinct methods used for their calculation. In this scenario, we will apply CSS to specify the height, width, margin, padding, and other styling attributes.
Please copy and execute the code provided below on your machine to gain a clearer understanding.
<html>
<head>
<title>
HTML DOM offsetHeight Property example
</title>
<style>
#PStyle {
height: 180px;
width: 400px;
margin: 20px;
padding: 15px;
background-color: lightblue;
}
</style>
</head>
<script>
function getInfo() {
var eleValue = document.getElementById("PStyle");
var txt1 = "OffsetHeight of the paragraph along with padding and border in pixels is: " + eleValue.offsetHeight + "px";
var txt2 = "OffsetWidth of the paragraph along with padding and border in pixels is: " + eleValue.offsetWidth + "px";
document.getElementById("sudo1").innerHTML = txt1;
document.getElementById("sudo2").innerHTML = txt2;
}
</script>
<body>
<h2> Calculation of offsetHeight and offsetWidth </h2>
<div id= "PStyle">
<b> A basic information about this div tab: </b>
<p id= "sudo1"> </p>
<p id= "sudo2"> </p>
</div>
<button type="button" onclick="getInfo()"> Submit </button>
</body>
</html>
Output
Observe the output below that includes a paragraph highlighted in a light blue background along with a submit button. Please click on this Submit button to determine the offsetHeight and offsetWidth of the paragraph.
Output before clicking on Submit button
Upon clicking the Submit button, the computed offsetHeight measures 210px, while the offsetWidth is 430px, both appearing within the light blue highlighted region. Refer to the output displayed below.
Output after clicking on Submit button
You have encountered multiple instances that involve calculating different parameters. In these diverse examples, we have submitted the text block with or without accompanying CSS styles and subsequently computed the offsetHeight and offsetWidth values separately.