خصائص offsetTop للعنصر DOM HTML

التعريف والاستخدام

خصائص offsetTop يتم رجوع الخاصية إلى موقع العنصر بالنسبة للآب (بونكس). هذه الخاصية غير قابلة للتعديل.

الناتج يشمل:

  • موقع العنصر الخارجي والهوامش.
  • مقدار الهوامش العلوية للآب والشريط المرئي والهوامش.

يرجى الرجوع إلى:دليل تعليمات نماذج CSS

offsetParent

جميع العناصر الحجومية تقرر قيمة الترحيل بالنسبة للمستوى الترحيلي المباشر:

  • خصائص offsetTop
  • خصائص offsetLeft
  • خصائص offsetWidth
  • خصائص offsetHeight

مستوى الترحيل هو الأب الأقرب الذي يحتوي على موقع غير ثابت.

إذا لم يكن هناك مستوى الترحيل، فإن قيمة الترحيل هي بالنسبة للنص الأساسي في الوثيقة.

يرجى الرجوع إلى:

خصائص offsetLeft

خصائص offsetWidth

خصائص offsetHeight

خاصية offsetParent

خاصية clientTop

خاصية clientLeft

خاصية clientWidth

خاصية clientHeight

مثال

مثال 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() {
  إذا (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

جرب بنفسك

النص

يتم رد موقع offset top:

element.offsetTop

القيمة التي يتم ردها

النوع الوصف
رقم موقع العنصر الأعلى، بمقياس البكسل.

دعم المتصفح

جميع المتصفحات يدعمونها element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم الدعم