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

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

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

Free-Learn

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

با استفاده از ویژگی offsetLeft میتونیم میزان فاصله یک عنصر رو از سمت چپ به نسبت عنصر والد یا پدرش بدست آوریم، و با استفاده از ویژگی offsetTop نیز میتونیم میزان فاصله یک عنصر رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آوریم.

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

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

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

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

Free-Learn

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

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

مثال شماره ۱ : با کلیک بروی یک دکمه، میزان فاصله ی عنصر از سمت چپ و سمت بالا محاسبه میشه ( حواستون باشه فاصله به نسبت پدر یا والد محاسبه میشه ) که در مثال زیر عنصر والد میشه تگ Body

امتحان کنید

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

در مثال بالا ما میخوایم فاصله ی یک عنصر رو از سمت چپ و بالا به نسبت عنصر پدر ( یا والد ) محاسبه کنیم، خیلی راحت با استفاده از ویژگی های offsetLeft ( از سمت چپ ) و offsetTop ( از سمت بالا ) اینکارو انجام دادیم.

عنصر والد یا پدر ، یعنی مثلا اگه باکس A درون باکس B بود، باکس B میشه والد یا پدر باکس A ، پس فاصله ای که محاسبه میشه به نسبت عنصر والد می باشد.

در مثال بالا، عنصر والد میشه کی بنظره شما؟! درسته ، عنصر والد میشه تگ Body ، پس فاصله به نسبت تگ body محاسبه میشه، یعنی میشه فاصله ی باکس سبز از سمت چپ به نسبت تگ Body

ولی در مثال شماره ۲ که پایینه، خودمون اومدیم و عنصر والد رو درست کردیم.

مثال شماره ۲ :در این مثال یک تگ والد یا پدر درست کردیم، بعدش میخوایم فاصله عنصر مورد نظر رو به نسبت تگ والد بدست آوریم.

امتحان کنید

Free-Learn

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

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

نام ویژگی Chrome Firefox Opera Safari IE
offsetLeft بله بله بله بله ۵٫۵

Free-Learn

شکل نوشتاری

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


Free-Learn

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

  • با استفاده از ویژگی offsetTop میتوان میزان فاصله یک عنصر رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آورد.
  • با استفاده از ویژگی offsetParent میتوان نزدیک ترین عنصر والد یا پدر یک عنصر را بدست آورد.

Free-Learn

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