آموزش متد getBoundingClientRect در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getBoundingClientRect در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getBoundingClientRect در DOM جاوااسکریپت
با استفاده از متد ()getBoundingClientRect میتونیم اندازه ( Size ) و موقعیت قرارگیری ( Position ) یک عنصر رو به نسبت ViewPort صفحه برگشت بدیم. ( یا بدست آوریم )
درگاه نمایش یا ViewPort به اون محدوده ای در صفحه گفته میشه که قابل مشاهده می باشد، که این محدوده معمولا بصورت مستطیل شکل ( Rectangular ) می باشد.
خودمونی بخوایم بگیم، به اون صفحه ای که درون مرورگر نمایش داده میشه میگیم 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 از سمت بالا و پایین می باشد.
