آموزش متد getBoundingClientRect در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getBoundingClientRect در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getBoundingClientRect در DOM جاوااسکریپت
با استفاده از متد ()getBoundingClientRect
میتونیم اندازه ( Size ) و موقعیت قرارگیری ( Position ) یک عنصر رو به نسبت ViewPort صفحه برگشت بدیم. ( یا بدست آوریم )
این متد یک شئ DOMRect برگشت میده که شامل مقادیر زیر می باشد :
- left یا x : میزان فاصله از سمت چپ
- top یا y : میزان فاصله از سمت بالا
- right : میزان فاصله از سمت راست
- bottom : میزان فاصله از سمت پایین
- width : اندازه عرض عنصر بهمراه مقدار ویژگی پدینگ و بوردر
- height : اندازه ارتفاع عنصر بهمراه مقدار ویژگی پدینگ و بوردر

مقدار برگشتی | برگشت مقادیر زیر left یا x : میزان فاصله از سمت چپ top یا y : میزان فاصله از سمت بالا right : میزان فاصله از سمت راست bottom : میزان فاصله از سمت پایین width : اندازه عرض عنصر بهمراه مقدار ویژگی پدینگ و بوردر height : اندازه ارتفاع عنصر بهمراه مقدار ویژگی پدینگ و بوردر |
---|---|
نسخه DOM | CSS Object Model (CSSOM) View Module |
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : بدست آوردن میزان فاصله ( یا موقعیت قرارگیری ) و اندازه عرض و ارتفاع عنصر به نسبت viewport کل صفحه
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<head> <script> function get(){ var mydiv , myrect , result; mydiv = document.getElementById("MyDiv"); result = document.getElementById("Result"); myrect = mydiv.getBoundingClientRect(); myx = myrect.left; myy = myrect.top; myz = myrect.right; myw = myrect.width; myh = myrect.height; result.innerHTML = "Left: " + myx + "<br> Top: " + myy + "<br> Right: " + myz + "<br> Width: " + myw + "<br> Height: " + myh; } </script> </head> |
مثال شماره ۲ : بدست آوردن میزان فاصله ( یا موقعیت قرارگیری ) و اندازه عرض و ارتفاع عنصر به نسبت viewport یک باکس یا پنجره خاص
1 2 3 |
<div id="MyBox"> <div id="MyDiv">سایت آموزشی فری لرن</div> </div> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
نام متد | Chrome | Firefox | Opera | Safari | IE |
()getBoundingClientRect | بله | بله | ۹٫۵ | بله | ۹٫۰ |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
1 |
Element.getBoundingClientRect(); |
Free-Learn
نکات و توضیحات
- این متد مقداری که به خروجی میده در واقع هم پوزیشن ( یا Position ) یا مکان قرار گیری عنصر می باشد و هم اندازه عرض ( width ) و ارتفاع عنصر ( height )
- اندازه عرض شامل مقدار ویژگی border از سمت راست و چپ می باشد.
- اندازه ارتفاع شامل مقدار ویژگی border از سمت بالا و پایین می باشد.