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

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

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

Free-Learn

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

با استفاده از ویژگی clientWidth میتونیم اندازه عرض ( Width ) قابل مشاهده ( یا در دسترس ) بهمراه مقدار Padding یک عنصر رو بدست بیاوریم.

یعنی میتونیم اندازه عرض ( ویژگی width ) یک عنصر رو که شامل مقدار ویژگی Padding می باشد، بدست آوریم، و همچنین با استفاده از ویژگی clientHeight میتونیم اندازه ارتفاع ( ویژگی height ) یک عنصر را که شامل Padding می باشد، محاسبه نماییم.

یعنی در یه کلام خروجی که به ما میده بصورت زیر محاسبه میشه :

  • مقدار کل ارتفاع = مقدار padding از سمت بالا + مقدار padding از سمت پایین + مقدار height
  • مقدار کل عرض = مقدار padding از سمت راست + مقدار padding از سمت چپ + مقدار width
مقدار برگشتی یک عدد که نشان دهنده اندازه کل عرض یک عنصر بهمراه مقدار Padding می باشد

Free-Learn

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

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

مثال شماره ۱ : در مثال زیر هم از ویژگی clientHeight و هم clientWidth استفاده شده ( clientHeight برای بدست آوردن اندازه ارتفاع بهمراه Padding و clientWidth برای بدست آوردن اندازه عرض بهمراه Padding )

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
clientWidth بله بله بله بله بله

Free-Learn

شکل نوشتاری

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


Free-Learn

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

  • ویژگی clientHeight مقدار اندازه ارتفاع ( Height ) رو بهمراه مقدار ویژگی Padding برمیگردونه.
  • ویژگی clientWidth مقدار اندازه عرض ( Width ) رو بهمراه مقدار ویژگی Padding برمیگردونه.
  • پیشنهاد میکنم حتما بحث مدل باکس بودن عناصر رو مطالعه نمایید.

Free-Learn

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