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());

আরও দেখুন