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

آموزش ویژگی offsetWidth در DOM جاوااسکریپت

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

ویژگی offsetWidth در DOM جاوااسکریپت

Free-Learn

ویژگی offsetWidth در DOM جاوااسکریپت

با استفاده از ویژگی offsetWidth میتونیم اندازه عرض ( ویژگی width ) قابل مشاهده ( یا در دسترس ) یک تگ که شامل مقدار Padding و Border و اسکرول بار ( overflow ) می باشد رو بدست بیاوریم.

منظور از اسکرول بار یعنی اون قسمتی از تگ که اسکرول ایجاد میشه ، یعنی اگه داخل باکس اسکرول بار وجود داشت خب اندازه اون قسمت هم محاسبه میشه.

این ویژگی فقط شامل اندازه Padding و Border و اسکرول بار می باشد، شامل Margin نمی باشد.

مقدار برگشتی یک عدد که نشان دهنده اندازه کل عرض یک تگ
بهمراه مقدار Padding و Border و اسکرول بار می باشد

Free-Learn

مثال از این ویژگی

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

مثال شماره ۱ : در مثال زیر هم از ویژگی offsetHeight و هم offsetWidth استفاده شده

  • offsetHeight : اندازه ارتفاع تگ + مقدار ویژگی های Padding سمت بالا و پایین + ویژگی Border سمت بالا و پایین + اسکرول بار
  • offsetWidth : اندازه عرض تگ + مقدار ویژگی های Padding سمت راست و چپ + ویژگی Border سمت راست و چپ + اسکرول بار

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari Edge
offsetWidth بله بله بله بله بله

Free-Learn

شکل نوشتاری

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


Free-Learn

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

  • offsetHeight : اندازه ارتفاع تگ + مقدار ویژگی های Padding سمت بالا و پایین + ویژگی Border سمت بالا و پایین + اسکرول بار
  • offsetWidth : اندازه عرض تگ + مقدار ویژگی های Padding سمت راست و چپ + ویژگی Border سمت راست و چپ + اسکرول بار

Free-Learn

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