HTML DOM offsetParent Property
Last Updated :
13 Jun, 2023
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 >GeeksforGeeks</ h1 >
< button onclick = "myGeeks()" >
Click Here!
</ button >
< p >The offsetParent:
< span id = "geeks" ></ span >
</ p >
</ div >
< 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.
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" >GeeksforGeeks</ h1 >
< button onclick = "myGeeks()" >
Click Here!
</ button >
< p >The offsetParent:
< span id = "geeks" ></ span >
</ p >
</ div >
< 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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...