HTML DOM getBoundingClientRect() मेथड

HTML DOM getBoundingClientRect() का उपयोग व्यूपोर्ट की स्थिति के सापेक्ष किसी तत्व का आकार लौटाने के लिए किया जाता है। यह DOMRect प्रकार का एक ऑब्जेक्ट लौटाता है जिसमें आठ गुण होते हैं: left, top, right, bottom, x, y, width, height। बाउंडिंग आयत की स्थिति स्क्रॉलिंग स्थिति बदलने पर बदलती है।

सिंटैक्स

getBoundingClientRect() मेथड के लिए सिंटैक्स:

element.getBoundingClientRect()

उदाहरण

आइए getBoundingClientRect() मेथड का एक उदाहरण देखते हैं:

<!DOCTYPE html> <html> <head> 
<script> 
  function RectInfo() { 
    document.getElementById("Sample").innerHTML=""; 
    var d = document.getElementById("DIV1"); 
    var Rect = d.getBoundingClientRect(); 
    rl = Rect.left; 
    rt = Rect.top; 
    rw = Rect.width; 
    rh = Rect.height; 
    document.getElementById("Sample").innerHTML += "Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh; 
  } 
</script> 
<style> 
  #DIV1{ 
    width:350px; 
    height:250px; 
    border:2px solid blue; 
    color:red; 
  } 
</style> </head> <body> 
<h1>getBoundingClientRect() उदाहरण</h1> 
<div style="height:200px; width:300px; overflow:auto;"> 
  <div id="DIV1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </div> 
</div> 
<br> 
<button onclick="RectInfo()">GET INFO</button> 
<p id="Sample"></p> 
</body> </html>

आउटपुट

यह निम्नलिखित आउटपुट देगा:

HTML DOM getBoundingClientRect() मेथड

GET INFO बटन पर क्लिक करने पर:

HTML DOM getBoundingClientRect() मेथड

उदाहरण की व्याख्या

उपरोक्त उदाहरण में:

हमने पहले 200px और 300px की ऊंचाई और चौड़ाई का एक div बनाया। इसमें overflow प्रॉपर्टी auto पर सेट है यानी यदि कंटेंट div से बाहर निकलता है तो स्क्रॉलबार अपने आप जुड़ जाएंगे। इसमें id "DIV1" वाला एक और div है जिस पर कुछ स्टाइलिंग लागू है:

#DIV1{ 
  width:350px; 
  height:250px; 
  border:2px solid blue; 
  color:red; 
} 
<div style="height:200px; width:300px; overflow:auto;"> 
  <div id="DIV1"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  </div> 
</div>

फिर हमने एक बटन GET INFO बनाया जो यूज़र द्वारा क्लिक किए जाने पर RectInfo() मेथड को एक्ज़िक्यूट करता है:

<button onclick="RectInfo()">GET INFO</button>

RectInfo() मेथड getElementById() मेथड का उपयोग करके <div> तत्व को प्राप्त करता है और इसे वेरिएबल d में असाइन करता है। फिर यह वेरिएबल d पर getBoundingClientRect() मेथड का उपयोग करके div तत्व के बारे में जानकारी रखने वाला एक DOMRect ऑब्जेक्ट लौटाता है। लौटाया गया ऑब्जेक्ट वेरिएबल Rect को असाइन किया जाता है।
फिर हम DOMRect ऑब्जेक्ट के left, top, width और height गुणों का उपयोग करके व्यूपोर्ट के सापेक्ष इसकी स्थिति और आकार प्रदर्शित करते हैं। यह जानकारी id "Sample" वाले पैराग्राफ में इसकी innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित की जाती है:

function RectInfo() { 
  document.getElementById("Sample").innerHTML=""; 
  var d = document.getElementById("DIV1"); 
  var Rect = d.getBoundingClientRect(); 
  rl = Rect.left; 
  rt = Rect.top; 
  rw = Rect.width; 
  rh = Rect.height; 
  document.getElementById("Sample").innerHTML += "Left: " + rl + ",<br> Top: " + rt + ",<br> Width: " + rw + ",<br> Height: " + rh; 
}