إزاحة العنصر _
❮ عنصر العنصرمثال
احصل على الموضع العلوي offsetTop لعنصر <div>:
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
التعريف والاستخدام
تقوم خاصية offsetTop بإرجاع الموضع العلوي (بالبكسل) بالنسبة إلى أعلى عنصر offsetParent.
القيمة التي تم إرجاعها تشمل:
- أعلى موضع وهامش العنصر
- الحشوة العلوية وشريط التمرير والحدود لعنصر offsetParent
ملاحظة: العنصر offsetParent هو أقرب سلف له موضع آخر غير ثابت.
نصيحة: لإعادة الموضع الأيسر لعنصر ما ، استخدم خاصية offsetLeft .
دعم المتصفح
Property | |||||
---|---|---|---|---|---|
offsetTop | Yes | 8.0 | Yes | Yes | Yes |
بناء الجملة
قم بإرجاع موضع الإزاحة العلوي:
object.offsetTop
تفاصيل تقنية
القيمة الافتراضية: | لا توجد قيمة افتراضية |
---|---|
قيمة الإرجاع: | رقم يمثل الموضع العلوي للعنصر بالبكسل |
إصدار DOM: | CSSOM |
مزيد من الأمثلة
مثال
احصل على موضع عنصر aa <div>:
var testDiv = document.getElementById("test");
var demoDiv = document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft: " + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
مثال
قم بإنشاء شريط تنقل ثابت:
// Get the navbar
var navbar = document.getElementById("navbar");
//
Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll position.
Remove the sticky class when you leave the scroll position.
function myFunction() {
if (window.pageYOffset
>= sticky) {
navbar.classList.add("sticky")
}
else {
navbar.classList.remove("sticky");
}
}
❮ عنصر العنصر