ویژگی offsetTop DOM Element HTML
- صفحه قبل offsetParent
- صفحه بعدی outerHTML
- برگشت به لایه بالاتر موضوع Elements HTML DOM
تعریف و استفاده
offsetTop ویژگی بازگشتی موقعیت بالا در مقابل پدر (به پیکسل) را تعیین می‌کند. این ویژگی فقط خواندنی است.
مقدار بازگشتی شامل:
- موقعیت بالا و حاشیه‌های عنصر
- مقدار پرانتزهای بالا، لولوم‌ها و حاشیه‌های پدر
لطفاً به: مراجعه کنیدآموزش مدل فریم CSS
offsetParent
تمام عناصر بلوکی گزارش می‌دهند که میزان حرکت در مقابل پدر متمرکز است:
- offsetTop
- offsetLeft
- offsetWidth
- offsetHeight
پدر متمرکز به نزدیک‌ترین اجداد با موقعیت غیرثابت اشاره دارد.
اگر پدر متمرکز وجود ندارد، میزان حرکت در مقابل متن اصلی مستند است.
لطفاً به: مراجعه کنید
مثال
مثال 1
موقعیت offsetTop "myDIV" را دریافت کنید:
const element = document.getElementById("myDIV");
let pos = element.offsetTop;
مثال 2
موقعیت "myDIV" را دریافت کنید:
const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;
مثال 3
ایجاد ناوبری چسبناک:
// ناوبری را دریافت کنید
const navbar = document.getElementById("navbar");
// موقعیت اسکرول ناوبری را دریافت کنید
const sticky = navbar.offsetTop;
// وقتی به موقعیت اسکرول عنصر رسید، کلاس sticky را به ناوبری اضافه کنید. وقتی از موقعیت اسکرول خارج شد، کلاس sticky را حذف کنید.
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
}
navbar.classList.remove("sticky");
}
}
قانون‌نویسی
موقعیت top offset را بازگرداند:
element.offsetTop
مقدار بازگشتی
| نوع | توضیح |
|---|---|
| عدد | موقعیت بالای عنصر، به واحد پیکسل. |
پشتیبانی مرورگر
همه مرورگرها از آن پشتیبانی می‌کنند element.offsetTop：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
- صفحه قبل offsetParent
- صفحه بعدی outerHTML
- برگشت به لایه بالاتر موضوع Elements HTML DOM
