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...