HTML DOM offsetLeft प्रॉपर्टी निर्दिष्ट एलिमेंट की बाईं स्थिति को पैरेंट एलिमेंट के बाएं किनारे के सापेक्ष पिक्सेल में लौटाती है।
सिंटैक्स
HTMLelement.offsetLeft
लौटाया गया मान निम्न से मेल खाता है:
- निर्दिष्ट एलिमेंट की बाईं स्थिति और मार्जिन
- पैरेंट एलिमेंट का बायां पैडिंग, स्क्रॉलबार, बॉर्डर और मार्जिन
उदाहरण
<!DOCTYPE html> <html> <head> <title>HTML DOM offsetLeft</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-offsetLeft</legend> <div id="containerDiv"> <img id="image" src="https://www.tutorialspoint.com/ios/images/ios-mini-logo.jpg"> </div> <input type="button" onclick="getLeft()" value="Get offsetLeft"> <div id="divDisplay"></div> </fieldset> </form> <script> var divDisplay = document.getElementById("divDisplay"); var picForm = document.getElementById("picForm"); var containerDiv = document.getElementById("containerDiv"); function getLeft() { // window.getComputedStyle() कंप्यूटेड CSS प्राप्त करता है var style = window.getComputedStyle(picForm); var style2 = window.getComputedStyle(document.body); divDisplay.innerHTML = 'Left Offset of form: '+picForm.offsetLeft+'px'; divDisplay.innerHTML += '<br>Left position of Child(form): '+style.left; divDisplay.innerHTML += '<br>Left margin of Child(form): '+style.marginLeft; divDisplay.innerHTML += '<br>Left padding of Parent(body): '+style2.paddingLeft; divDisplay.innerHTML += '<br>Left border of Parent(body): '+style2.borderLeftWidth; divDisplay.innerHTML += '<br>Left margin of Parent(body): '+style2.marginLeft; } </script> </body> </html>
आउटपुट
किसी बटन पर क्लिक करने से पहले -
'Get offsetLeft' बटन पर क्लिक करने के बाद -
