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>