revision:
The property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element; the top padding, scrollbar and border of the parent.
The property is read-only.
Syntax:
element.offsetTop : the top position of the element, in pixels.
property value:
none :
example
Click the button to get the left and top offsets for the test div.
offsetLeft:
offsetTop:
<div> <div id="DIV"> <p>Click the button to get the left and top offsets for the test div.</p> <p><button onclick="fistFunction()">click me</button></p> <p id="prop">offsetLeft: <br>offsetTop: </p> </div> </div> <style> #DIV{left: 100px; top: 30px; margin: 10px; padding: 10px; width: 300px; position: relative; border: 5px solid black} </style> <script> function firstFunction() { var testDiv = document.getElementById("DIV"); var demoDiv = document.getElementById("prop"); demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop; } </script>
Click the button to get offsetTop for the test div.
offsetTop is:
<div id="test"> <p>Click the button to get offsetTop for the test div.</p> <p><button onclick="secondFunction()">Try it</button></p> <p>offsetTop is: <span id="prop1"></span></p> </div> <style> #test{top: 10px; margin: 10px; padding: 10px; width: 300px; position: relative; border: 5px solid black} </style> <script> function secondFunction() { var testDiv = document.getElementById("test"); document.getElementById("prop1").innerHTML = testDiv.offsetTop; } </script>