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

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

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

Free-Learn

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

با استفاده از ویژگی clientLeft میتونیم اندازه بوردِر یا Border یا حاشیه سمت چپ ( Left ) یک عنصر رو بدست بیاوریم، و همچنین با استفاده از ویژگی clientTop میتونیم اندازه بوردِر یا Border یا حاشیه سمت بالا ( Top ) یک عنصر رو بدست بیاوریم.

مقدار برگشتی یک عدد که نشان دهنده اندازه ویژگی Border از سمت چپ یک عنصر می باشد

Free-Learn

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

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

مثال شماره ۱ : در مثال زیر هم از ویژگی clientLeft و هم clientTop استفاده شده ( clientLeft برای بدست آوردن اندازه اندازه Border جهت چپ و clientTop برای بدست آوردن اندازه Border جهت بالا )

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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


Free-Learn

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

  • ویژگی clientTop مقدار اندازه بوردر ( Border ) سمت / جهت بالارو برمیگردونه.
  • برای بدست آوردن اندازه ارتفاع ( Height ) یک عنصر + مقدار Padding باید از ویژگی clientHeight استفاده کرد.
  • برای بدست آوردن اندازه عرض ( Width ) یک عنصر + مقدار Padding باید از ویژگی clientWidth استفاده کرد.
  • در سیستم عامل ویندوز و در مرورگرهای Chrome و  Firefox و Opera اگر یک عنصر شامل اسکرول ( ویژگی Overflow ) باشه و جهت نوشتاری از راست به چپ ( ویژگی direction ) باشه، مقدار خروجی شامل میزان اندازه اسکرول و میزان مقدار Border می باشد و در همین حال در مرورگر IE خروجی ۰ میشه.
  • در سیستم عامل مک ( Macintosh یا در مخفف Mac ) و در مرورگرهای Chrome و  Firefox و Opera و Safari ، مقدار خروجی فقط شامل اندازه Border سمت چپ عنصر می باشد.

Free-Learn

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