HTML - DOM Element offsetHeight Property

Quiz

The HTML DOM ElementoffsetHeightproperty is used to retrieve the complete viewable height of that element on the webpage.

The returned height includes both its vertical padding and borders, calculated in pixels. If an element has no styling (like no height or padding defined) and no content, its offset height will indeed be 0px.

Following is the list of similar offset properties:

offsetTop

offsetWidth

offsetLeft

Syntax

Following is the syntax of the HTML DOM Element offsetHeight property −

element.offsetHeight

Parameters

Since this is a property, it will not accept any parameter.

Return Value

This property returns the height of an element in pixels, including its padding and border.

Example 1: Retrieving the offsetHeight Property Value

The following is the basic example of the HTML DOM Element offsetHeight property. It displays the height of a div element −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element offsetHeight</title> 
<style>
   .box {
       width: 200px; 
       padding: 20px;
       border: 1px solid black;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<p>Displays the offset height of the box.</p>   
<div class="box" id="myBox">Welcome to Tutorialspoint</div>
<p id="res"></p>
<script>
   var element = document.getElementById("myBox");
   var height = element.offsetHeight;
   document.getElementById("res").innerHTML = "Offset height: " + height;
</script>
</body>
</html>

The above program displays the offset height of the "div" element.

Example 2: offsetHeight of ScrollBar

Following is another example of the HTML DOM Element offsetHeight property. We use this property to retrieve the offset height of the scroll bar −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element offsetHeight</title>
<style>
   .scroll-box {
       width: 200px;
       height: 100px;
       border: 1px solid black;
       overflow-y: scroll;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div class="scroll-box" id="myScrollBox">
<p>Scroll down to see more content.</p>
<p>Content 1</p>
<p>Content 2</p>
<p>Content 3</p>
<p>Content 4</p>
</div>  
<p id="heightDisplay"></p>
<script>
   var element = document.getElementById("myScrollBox");
   var height = element.offsetHeight;
   document.getElementById("heightDisplay").textContent =
   "Offset height of the scroll box: " + height + "px";
</script>
</body>
</html>

After executing the above program, it displays the offset height of the scrollbar.

Example 3

If an element has no styling (like no height or padding defined) and no content, its offset height will indeed be 0px −

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Element offsetHeight</title>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div id="myScrollBox"></div>  
<p id="heightDisplay"></p>
<script>
   var element = document.getElementById("myScrollBox");
   var height = element.offsetHeight;
   document.getElementById("heightDisplay").textContent = 
   "Offset height: " + height + " px";
</script>
</body>
</html>

The above program returns the offset height as zero.

Supported Browsers

Property
offseHeight	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page