HTML DOM getBoundingClientRect () का उपयोग व्यूपोर्ट की स्थिति के सापेक्ष एक तत्व के आकार को वापस करने के लिए किया जाता है। यह DOMRect प्रकार की वस्तु देता है जिसमें आठ गुण बाएँ, ऊपर, दाएँ, नीचे, x, y, चौड़ाई, ऊँचाई हैं। स्क्रॉलिंग स्थिति में परिवर्तन होने पर बाउंडिंग आयत की स्थिति बदल जाती है।
सिंटैक्स
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() example</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> आउटपुट
यह निम्नलिखित आउटपुट देगा -
जानकारी प्राप्त करें बटन क्लिक करने पर -
उपरोक्त उदाहरण में -
हमने पहले क्रमशः 200px और 300px ऊँचाई और चौड़ाई का एक div बनाया है। इसमें ओवरफ्लो प्रॉपर्टी ऑटो पर सेट है यानी यदि सामग्री div को ओवरफ्लो करती है तो स्क्रॉलबार स्वचालित रूप से जुड़ जाएंगे। इसमें आईडी "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 () विधि का उपयोग करके
फिर हम व्यूपोर्ट के सापेक्ष इसकी स्थिति और आकार को प्रदर्शित करने के लिए DOMRect ऑब्जेक्ट के बाएँ, ऊपर, चौड़ाई और ऊँचाई के गुणों का उपयोग करते हैं। यह जानकारी अनुच्छेद में "नमूना" आईडी के साथ अपनी आंतरिक HTML संपत्ति का उपयोग करके प्रदर्शित की जाती है -
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;
}