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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

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

امتحان کنید

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

امتحان کنید

Free-Learn

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

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

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

Free-Learn

شکل نوشتاری

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


Free-Learn

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

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

Free-Learn

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