Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM offsetParent Property
  • Difficulty Level : Basic
  • Last Updated : 26 Jul, 2019

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 arrow_drop_up
Recommended Articles
Page :