این آموزش در تاریخ ۱۴۰۱/۰۵/۰۴ آپدیت شده است.
آموزش ویژگی offsetTop در DOM جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی offsetTop در DOM جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی offsetTop در DOM جاوااسکریپت
با استفاده از ویژگی offsetTop میتونیم میزان فاصله یک عنصر رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آوریم ، و با استفاده از ویژگی offsetLeft نیز میتونیم میزان فاصله یک عنصر رو از سمت چپ به نسبت عنصر والد یا پدرش بدست آوریم.
مقداری که این ویژگی بازگشت میده شامل :
- میزان فاصله از سمت بالا + میزان مقدار ویژگی Margin
- مقدار Padding سمت بالا + مقدار Border و اسکرول بار عنصر والد
| مقدار برگشتی | یک مقدار به پیکسل که نشان دهنده میزان فاصله یک عنصر از سمت چپ به نسبت عنصر والد یا پدرش می باشد |
|---|
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از این ویژگی را در زبان جاوا اسکریپت مشاهده نمایید.
مثال شماره ۱ : در این مثال یک تگ والد یا پدر درست کردیم، بعدش میخوایم فاصله تگ فرزند رو به نسبت تگ والد بدست آوریم.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> function Get_Size() { var MyBox , Result , MySize; MyBox = document.getElementById("Farzand"); Result = document.getElementById("Result"); MySize = "Left = " + MyBox.offsetLeft + "px" + "<br>" + "Top = " + MyBox.offsetTop + "px"; Result.innerHTML = MySize; } </script> |
مثال شماره ۲ : میخوایم کاری کنیم که وقتی بسمت پایین اسکرول کردیم، منو فیکس بشه و بچسبه به سقف مرورگر
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> var MyNavbar = document.getElementById("MyMenu"); var MySticky = MyNavbar.offsetTop; function MyFixedMenu() { if( window.pageYOffset >= MySticky ){ MyNavbar.classList.add("sticky") }else{ MyNavbar.classList.remove("sticky"); } } </script> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این ویژگی در جاوااسکریپت پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| offsetTop | بله | بله | بله | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در جاوااسکریپت بصورت زیر می باشد.
|
1 |
Element.offsetTop; |
Free-Learn
نکات و توضیحات
- با استفاده از ویژگی offsetTop میتوان میزان فاصله یک تگ رو از سمت بالا به نسبت عنصر والد یا پدرش بدست آورد.
- با استفاده از ویژگی offsetLeft میتوان میزان فاصله یک تگ رو از سمت چپ به نسبت عنصر والد یا پدرش بدست آورد.
