HTML DOM Element offsetTop özelliği

Tanım ve kullanım

offsetTop Bu özellik, ebeveynine göre üst konumu (piksel olarak) döndürür. Bu özellik yalnızca okunabilir.

Dönüş değeri şunları içerir:

  • Elemanın üst konumu ve marjı
  • Ebeveynin üst iç kenar boşluğu, kaydırma çubuğu ve kenar çizgileri

Daha fazla bilgi için bkz:CSS kutu modeli eğitimi

offsetParent

Tüm blok düzeyi elemanları, kaydırma ebeveynine göre kaydırma miktarını rapor eder:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Kaydırma ebeveyni, en yakın dinamik konumlu ata nesnesidir.

Eğer bir kaydırma ebeveyni yoksa, kaydırma miktarı metin belgesine göre ölçülür.

Daha fazla bilgi için bkz:

offsetLeft özelliği

offsetWidth özelliği

offsetHeight özelliği

offsetParent özelliği

clientTop özelliği

clientLeft özelliği

clientWidth özelliği

clientHeight özelliği

Örnek

Örnek 1

"myDIV" offsetTop konumunu alın:

const element = document.getElementById("myDIV");
let pos = element.offsetTop;

Kişisel olarak deneyin

Örnek 2

"myDIV" konumunu alın:

const element = document.getElementById("test");
Let pos1 = element.offsetTop;
let pos2 = element.offsetLeft;

Kişisel olarak deneyin

Örnek 3

Yapışkan navigasyon çubuğu oluşturma:

//Navigasyon çubuğunu alın
const navbar = document.getElementById("navbar");
//Navigasyon çubuğunun konumunu alın
const sticky = navbar.offsetTop;
//滚动到导航栏位置时，将 sticky sınıfını ekleyin. Sınıfı çıkarın.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Kişisel olarak deneyin

Sözdizimi

Top offset konumunu döndür:

element.offsetTop

Dönüş değeri

Tür Açıklama
Sayı Dinamik değer, pixel cinsinden elementin üst konumunu belirtir.

Tarayıcı desteği

Tüm tarayıcılar destekler element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Destek Destek Destek Destek Destek Destek