HTML - DOM Element offsetParent Property

Quiz

The HTML DOM Element offsetParent property is used to retrieve the nearest offset parent (or ancestor) of an element. The offset parent is the "closest ancestor" element that has a position other than static, such as relative, absolute, or fixed.

If an element is hidden or not visible (set as display = "none"), it will return null. If no ancestor is present, it returns the document HTML element.

Syntax

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

element.offsetParent

Parameters

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

Return Value

This property returns an element that affects the positioning of another element. If the element is hidden, it returns null.

Example 1: Displaying the Offset Parent of an Element

The following is the basic example of the HTML DOM Element offsetParent property. It retrieves the of the <div> element −

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
   .c {
      position: relative;
      width: 300px;
      height: 150px;
      border: 1px solid black; 
   }
   .b {
      position: absolute;
      top: 30px;
      left: 30px;
      width: 200px;
      padding: 10px; 
      background-color: lightblue;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetHeight Property</h3>
<div class="c">
<div class="b" id="e">Example Element</div>
</div>
<br>
<button onclick="s()">Show offsetParent</button>
<p id="o"></p>
<script>
   function s() {
      const e = document.getElementById('e');
      const p = e.offsetParent;
      const o = document.getElementById('o');
      o.textContent = `Offset Parent: ${p ? p.tagName : 'null'}`;
   }
</script>
</body>
</html>

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

Example 2: Handling Hidden Element

Following is another example of the HTML DOM Element offsetParent property. We use this property to retrieve the offset parent of a hidden element −

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM Element offsetParent</title>
<style>
   .con {
       position: relative;
       width: 300px;
       height: 200px;
       background-color: green;
       border: 1px solid black;
   }
   .hid {
       display: none;
   }
   button{
     padding: 10px;
   }
</style>
</head>
<body>
<h3>HTML DOM Element offsetParent Property</h3>
<p>Handles when the element is hidden...</p>
<div class="con">
<div class="hid" id="ele">Hide Element</div>
</div>
<button onclick="offp()">Show offsetParent</button>
<script>
   function offp() {
      const ele = document.getElementById('ele');
      const Pt = ele.Pt;
      alert(`Offset Parent: ${Pt ? Pt.tagName : 'null'}`);
   }
</script>
</body>
</html>

After executing the above program, it will display "null" as the offset parent of a hidden element.

Supported Browsers

Property
offsetParent	Yes	Yes	Yes	Yes	Yes

html_dom.htm

Print Page