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

My Personal Notes

Recommended Posts: