Skip to content
Related Articles

Related Articles

HTML | DOM offsetTop Property

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 06 Jul, 2021

The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element.

Syntax: 

object.offsetTop

Return Value:  

  • A number in pixel unit represents the top position of element.

Example:  

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        #offsetdiv {
            top: 80px;
            margin: 20px;
            padding: 10px;
            width: 350px;
            position: absolute;
            border: 5px solid green
        }
    </style>
</head>
 
<body>
    <h3>Geeks for Geeks</h3>
    <h3>HTML DOM offsetTop property</h3>
    <div id="offsetdiv">
 
         
<p>
            <button onclick="GFGfunction()">Try it</button>
        </p>
 
         
<p>offsetTop is: <span id="gfg"></span></p>
 
    </div>
    <script>
        function GFGfunction() {
            var x = document.getElementById("offsetdiv");
            document.getElementById("gfg").innerHTML =
             offsetdiv.offsetTop;
        }
    </script>
 
</body>
 
</html>

Output: 
Before clicking on the button: 

After clicking on the button:  

Supported Browsers: 

  • Google Chrome
  • Internet Explorer 4.0
  • Firefox
  • Opera
  • Safari

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!