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.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Element offsetParent Property </ title > </ head > < body > < div id = "GFG" > < h1 >w3wiki</ h1 > < button onclick = "myBeginner()" > Click Here! </ button > < p >The offsetParent: < span id = "Beginner" ></ span > </ p > </ div > <!-- Script to return the offset parent --> < script > function myBeginner() { // Return offset parent of div var offsetp = document.getElementById("GFG"); document.getElementById("Beginner").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.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Element offsetParent Property </ title > < style > #GFG { display: none; } </ style > </ head > < body > < div id = "g4g" > < h1 id = "GFG" >w3wiki</ h1 > < button onclick = "myBeginner()" > Click Here! </ button > < p >The offsetParent: < span id = "Beginner" ></ span > </ p > </ div > <!-- Script to return the offset parent --> < script > function myBeginner() { // Return offset parent of div var offsetp = document.getElementById("GFG"); document.getElementById("Beginner").innerHTML = offsetp.offsetParent; } </ script > </ body > </ html > |
Output:
Before clicking on the button:
After clicking on the button:
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 8 and above
- Safari 3 and above
Contact Us