HTML DOM offsetTop प्रॉपर्टी निर्दिष्ट एलिमेंट की शीर्ष स्थिति को पैरेंट एलिमेंट के शीर्ष किनारे के सापेक्ष पिक्सेल में लौटाती है।
सिंटैक्स
HTMLelement.offsetTop
लौटाया गया मान निम्न से मेल खाता है:
- निर्दिष्ट एलिमेंट की शीर्ष स्थिति और मार्जिन
- पैरेंट एलिमेंट का शीर्ष पैडिंग, स्क्रॉलबार, बॉर्डर और मार्जिन
उदाहरण
<!DOCTYPE html> <html> <head> <title>HTML DOM offsetTop</title> <style type="text/css"> #picForm { width:70%; margin: 0 auto; text-align: center; } input[type="button"] { border-radius: 10px; } #containerDiv { margin: 0 auto; } </style> </head> <body> <form id="picForm"> <fieldset> <legend>HTML-DOM-offsetTop</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/compiler_design/images/compiler-design-mini-logo.jpg"> </div> <input type="button" onclick="getHeight()" value="Get offsetTop"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var picForm = document.getElementById("picForm"); var containerDiv = document.getElementById("containerDiv"); function getHeight() { // window.getComputedStyle() कंप्यूटेड CSS प्राप्त करता है var style = window.getComputedStyle(picForm); var style2 = window.getComputedStyle(document.body); divDisplay.innerHTML = 'Top Offset of form: '+picForm.offsetTop+'px'; divDisplay.innerHTML += '<br>Top position of Child(form): '+style.Top; divDisplay.innerHTML += '<br>Top margin of Child(form): '+style.marginTop; divDisplay.innerHTML += '<br>Top padding of Parent(body): '+style2.paddingTop; divDisplay.innerHTML += '<br>Top border of Parent(body): '+style2.borderTopWidth; divDisplay.innerHTML += '<br>Top margin of Parent(body): '+style2.marginTop; } </script> </body> </html>
आउटपुट
किसी बटन पर क्लिक करने से पहले -
'Get offsetTop' बटन पर क्लिक करने के बाद -
