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 the pixel unit represents the top position of the element.
Example: In this example, we will use DOM offsetTop property
<!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() {
let x = document.getElementById("offsetdiv");
document.getElementById("gfg").innerHTML =
offsetdiv.offsetTop;
}
</script>
</body>
</html>
Output:
Supported Browsers:
- Google Chrome 1 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 8 and above
- Safari 3 and above