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