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>আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
GET INFO বাটনে ক্লিক করলে:
উপরের উদাহরণে:
প্রথমে ২০০px এবং ৩০০px উচ্চতা ও প্রস্থের একটি div তৈরি করা হয়েছে। এর overflow প্রপার্টি auto সেট করা হয়েছে অর্থাৎ কন্টেন্ট ওভারফ্লো করলে স্বয়ংক্রিয়ভাবে স্ক্রোলবার যোগ হবে। এর ভিতরে 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; } 