HTML DOM getBoundingClientRect() পদ্ধতি

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>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM getBoundingClientRect() পদ্ধতি

GET INFO বোতামে ক্লিক করলে -

HTML DOM getBoundingClientRect() পদ্ধতি

উপরের উদাহরণে -

আমরা প্রথমে যথাক্রমে 200px এবং 300px উচ্চতা এবং প্রস্থের একটি ডিভ তৈরি করেছি। এতে ওভারফ্লো প্রপার্টি স্বয়ংক্রিয়ভাবে সেট করা আছে অর্থাৎ স্ক্রলবার স্বয়ংক্রিয়ভাবে যোগ হয়ে যাবে যদি বিষয়বস্তু ডিভ-এ ওভারফ্লো হয়। এটিতে "DIV1" আইডি সহ আরেকটি ডিভ রয়েছে যেটিতে কিছু স্টাইলিং প্রয়োগ করা হয়েছে৷

৷

#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() মেথড ব্যবহার করে

এলিমেন্ট পায় এবং ভেরিয়েবল d-এ বরাদ্দ করে। এটি তারপর div উপাদান সম্পর্কে তথ্য ধারণকারী একটি DOMRect অবজেক্ট ফেরত দিতে ভেরিয়েবল d-এ getBoundingClientRect() পদ্ধতি ব্যবহার করে। প্রত্যাবর্তিত বস্তুটি ভেরিয়েবল রেক্টে বরাদ্দ করা হয়।

তারপরে আমরা ভিউপোর্টের সাথে সম্পর্কিত অবস্থান এবং আকার প্রদর্শন করতে 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;
}