این آموزش در تاریخ ۱۴۰۱/۰۵/۱۶ آپدیت شده است.
آموزش متد getBoundingClientRect در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getBoundingClientRect در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
متد getBoundingClientRect در DOM جاوااسکریپت
با استفاده از متد ()getBoundingClientRect میتونیم اندازه و موقعیت قرارگیری ( Position ) یک تگ رو به نسبت ViewPort صفحه برگشت بدیم. ( یا بدست آوریم )
این متد مقادیری که برگشت میده شامل مقادیر زیر می باشد :
- left : میزان فاصله از سمت چپ
- top : میزان فاصله از سمت بالا
- right : میزان فاصله از سمت راست
- bottom : میزان فاصله از سمت پایین
- width : اندازه عرض تگ بهمراه مقدار ویژگی پدینگ و بوردر
- height : اندازه ارتفاع تگ بهمراه مقدار ویژگی پدینگ و بوردر
| مقدار برگشتی | برگشت مقادیر زیر left : میزان فاصله از سمت چپ top : میزان فاصله از سمت بالا right : میزان فاصله از سمت راست bottom : میزان فاصله از سمت پایین width : اندازه عرض تگ بهمراه مقدار ویژگی پدینگ و بوردر height : اندازه ارتفاع تگ بهمراه مقدار ویژگی پدینگ و بوردر |
|---|
Free-Learn
مثال از این متد
در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : با کلیک بروی یک دکمه ، میزان فاصله ( یا موقعیت قرارگیری ) و اندازه یک تگ در خروجی نمایش داده خواهد شد.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get(){ var MyBox , MySize , Result; MyBox = document.getElementById("MyBox"); Result = document.getElementById("Result"); MySize = MyBox.getBoundingClientRect(); Result.innerHTML = "Left: " + MySize.left + "<br> Top: " + MySize.top + "<br> Right: " + MySize.right + "<br> Width: " + MySize.width + "<br> Height: " + MySize.height; } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام متد | Chrome | Firefox | Opera | Safari | Edge |
| ()getBoundingClientRect | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.getBoundingClientRect(); |
Free-Learn
نکات و توضیحات
- اندازه عرض تگ شامل مقدار ویژگی Border و ویژگی Padding از سمت راست و چپ می باشد.
- اندازه ارتفاع تگ شامل مقدار ویژگی Border و ویژگی Padding از سمت بالا و پایین می باشد.
