HTML | DOM offsetParent Property
In HTML, the offsetParent property is used to return the nearest ancestor of an element. The ancestor returned must have a position other than static. The offestParent property returns a null value if the element is set to display=”none”.
Syntax:
object.offsetParent;
This property is used to return the offsetParent of an element. This method has no default value. The offsetParent is a useful property because offsetTop and offsetLeft are relative to its padding edge.
Example 1: This example returns the offsetParent property.
<!DOCTYPE html><html> <head> <title> HTML DOM Element offsetParent Property </title></head> <body> <div id = "GFG"> <h1>GeeksforGeeks</h1> <button onclick="myGeeks()"> Click Here! </button> <p>The offsetParent: <span id="geeks"></span> </p> </div> <!-- Script to return the offset parent --> <script> function myGeeks() { // Return offset parent of div var offsetp = document.getElementById("GFG"); document.getElementById("geeks").innerHTML = offsetp.offsetParent; } </script> </body> </html> |
Output:
Before clicking on the button:
After clicking on the button:
Example 2: This example use display property to hide the offsetParent value.
<!DOCTYPE html><html> <head> <title> HTML DOM Element offsetParent Property </title> <style> #GFG { display: none; } </style></head> <body> <div id = "g4g"> <h1 id = "GFG">GeeksforGeeks</h1> <button onclick="myGeeks()"> Click Here! </button> <p>The offsetParent: <span id="geeks"></span> </p> </div> <!-- Script to return the offset parent --> <script> function myGeeks() { // Return offset parent of div var offsetp = document.getElementById("GFG"); document.getElementById("geeks").innerHTML = offsetp.offsetParent; } </script> </body> </html> |
Output:
Before clicking on the button:
After clicking on the button:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
