HTML DOM عنصر offsetTop کیمپٹنسی

تعلیم اور استعمال

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");
  }
}

آزمایش کنید

نحوه استفاده

موقعیت top offset بازگشتی:

element.offsetTop

مقدار بازگشتی

نوع توضیح
عدد موقعیت بالا عناصر، به پیکسل تبدیل شده است.

پشتیبانی مرورگر

تمام مرورگرها از آن پشتیبانی می‌کنند element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی