getBoundingClientRect मेथड

getBoundingClientRect मेथड में एलिमेंट के कोऑर्डिनेट्स का ऑब्जेक्ट होता है। कोऑर्डिनेट्स की गणना पेज के दृश्यमान भाग के सापेक्ष की जाती है, बिना स्क्रॉलिंग को ध्यान में रखे (विंडो के सापेक्ष)। यानी position प्रॉपर्टी के fixed वैल्यू की तरह।

लौटाए गए ऑब्जेक्ट में निम्नलिखित प्रॉपर्टीज़ होती हैं: left, top, right, bottom, width, height। यह ध्यान देने योग्य है कि इन प्रॉपर्टीज़ का CSS प्रॉपर्टीज़ से कोई संबंध नहीं है। इनमें एलिमेंट की संबंधित भुजाओं तक की दूरी होती है। left/right के लिए - पेज के दृश्यमान क्षेत्र की बाईं सीमा से, और top/bottom के लिए - ऊपरी सीमा से।

सिंटैक्स

javascriptelement.getBoundingClientRect();

उदाहरण

एलिमेंट के कोऑर्डिनेट्स प्राप्त करें:

html<div id="elem"></div>
css#elem {
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
javascriptlet elem = document.querySelector('#elem');
console.log(elem.getBoundingClientRect());

यह भी देखें

  • offsetParent प्रॉपर्टी,
    जिसमें पोजीशनिंग वाला पैरेंट होता है
  • offsetTop प्रॉपर्टी,
    जिसमें एलिमेंट का ऊपर से ऑफसेट होता है
  • offsetLeft प्रॉपर्टी,
    जिसमें एलिमेंट का बाईं ओर से ऑफसेट होता है
  • elementFromPoint मेथड,
    जो कोऑर्डिनेट्स के आधार पर एलिमेंट लौटाता है