خصائص offsetTop لـ HTML DOM Element

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

offsetTop يتم تحديد قيمة الخاصية بالنسبة للموقع العلوية للوالد (بأوكسل). هذه الخاصية غير قابلة للتعديل.

القيمة التي تعود تشمل:

  • موقع العنصر والهوامش الخارجية
  • مقدار الهوامش العلوية للوالد، والشريط المتدحرج والهوامش

الرجاء الرجوع إلى:دروس نموذج المربع CSS

offsetParent

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

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

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

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

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

offsetLeft 属性

offsetWidth 属性

offsetHeight 属性

offsetParent ਪ੍ਰਤੀਯੋਗਿਤਾ

clientTop ਪ੍ਰਤੀਯੋਗਿਤਾ

clientLeft ਪ੍ਰਤੀਯੋਗਿਤਾ

clientWidth ਪ੍ਰਤੀਯੋਗਿਤਾ

clientHeight ਪ੍ਰਤੀਯੋਗਿਤਾ

ਇੰਸਟੈਂਸ

ਉਦਾਹਰਣ 1

myDIV ਦੀ offsetTop ਸਥਿਤੀ ਪ੍ਰਾਪਤ ਕਰੋ:

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 ਆਫਸੈਟ ਸਥਿਤੀ ਰਿਟਰਨ ਕਰੋ:

element.offsetTop

ਰਿਟਰਨ ਵੈਲਿਊ

ਇੰਟਰਵੈਲ ਵਰਣਨ
ਨੰਬਰ ਇਲੈਕਟ੍ਰੌਨ ਦੀ ਉੱਚਾਈ ਸਥਿਤੀ ਪਿਕਸਲ ਵਿੱਚ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਾਰੇ ਬਰਾਊਜ਼ਰਾਂ ਦਾ ਸਮਰਥਨ ਹੈ element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ ਸਮਰਥਨ