این آموزش در تاریخ ۱۴۰۱/۰۵/۱۶ آپدیت شده است.

آموزش متد getBoundingClientRect در DOM جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش متد getBoundingClientRect در DOM جاوااسکریپت با من همراه باشید.

متد getBoundingClientRect در DOM جاوااسکریپت

Free-Learn

متد getBoundingClientRect در DOM جاوااسکریپت

با استفاده از متد ()getBoundingClientRect میتونیم اندازه و موقعیت قرارگیری ( Position ) یک تگ رو به نسبت ViewPort صفحه برگشت بدیم. ( یا بدست آوریم )

این متد مقادیری که برگشت میده شامل مقادیر زیر می باشد :

  • left : میزان فاصله از سمت چپ
  • top : میزان فاصله از سمت بالا
  • right : میزان فاصله از سمت راست
  • bottom : میزان فاصله از سمت پایین
  • width : اندازه عرض تگ بهمراه مقدار ویژگی پدینگ و بوردر
  • height : اندازه ارتفاع تگ بهمراه مقدار ویژگی پدینگ و بوردر
متد getBoundingClientRect در DOM جاوااسکریپت
نحوه محاسبه موقعیت قرارگیری عنصر نسبت به viewport
مقدار برگشتی برگشت مقادیر زیر
left : میزان فاصله از سمت چپ
top : میزان فاصله از سمت بالا
right : میزان فاصله از سمت راست
bottom : میزان فاصله از سمت پایین
width : اندازه عرض تگ بهمراه مقدار ویژگی پدینگ و بوردر
height : اندازه ارتفاع تگ بهمراه مقدار ویژگی پدینگ و بوردر

Free-Learn

مثال از این متد

در ادامه میتوانید یک مثال از این متد را در زبان جاوا اسکریپت مشاهده نمایید.

مثال شماره ۱ : با کلیک بروی یک دکمه ، میزان فاصله ( یا موقعیت قرارگیری ) و اندازه یک تگ در خروجی نمایش داده خواهد شد.

امتحان کنید

توضیح مثال بالا :

اندازه width خوده تگ، ۲۰۰ پیکسل هستش ولی در خروجی شده ۲۰۸ !؟ خب چرا؟ چون گفتم مقدار Border و Padding از سمت راست و چپ هم بهش اضافه میشه، خب Padding مقدارش ۲پیکسل هست که از سمت راست و چپ میشه ۴ پیکسل، ویژگی Border هم همینطور اونم ۲ پیکسل هست که از سمت راست و چپ میشه ۴ پیکسل و در مجموع میشه ۸ پیکسل

پس در مجموع میشه ۸ + ۲۰۰ = ۲۰۸ پیکسل

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این متد در جاوااسکریپت پشتیبانی میکنند یا خیر.

نام متد Chrome Firefox Opera Safari Edge
()getBoundingClientRect بله بله بله بله بله

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این متد در جاوااسکریپت بصورت زیر می باشد.


Free-Learn

نکات و توضیحات

  • اندازه عرض تگ شامل مقدار ویژگی Border و ویژگی Padding از سمت راست و چپ می باشد.
  • اندازه ارتفاع تگ شامل مقدار ویژگی Border و ویژگی Padding از سمت بالا و پایین می باشد.

Free-Learn

دریافت PDF یا پرینت این مطلب