Open In App
Related Articles

HTML DOM offsetParent Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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

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

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!


Last Updated : 13 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads
Complete Tutorials