HTML DOM Element offsetTop-ominaisuus

Määrittely ja käyttö

offsetTop Ominaisuus palauttaa isän suhteellisen yläasennon (pikseleissä). Tämä ominaisuus on lukuinen.

Palautusarvo sisältää:

  • Elementin yläasento ja ulkoreuna
  • Isän yläpuolinen sisennyssuunta, vierityspalkit ja reunat

Lisätietoja:CSS-ruudukkomallin opetusohjelma

offsetParent

Kaikki lohkoelementit raportoivat siirtymät suhteessa siirtymäisäntään:

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

Siirtymäisäntä tarkoittaa lähintä ei-statiikkaa sijaitsevaa isäntää.

Jos ei ole olemassa siirtymäisäntä, siirtymä on suhteessa dokumentin sisältöön.

Lisätietoja:

offsetLeft-ominaisuus

offsetWidth-ominaisuus

offsetHeight-ominaisuus

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")
  } else {
    navbar.classList.remove("sticky");
  }
}

亲自试一试

语法

返回 top offset 位置：

element.offsetTop

返回值

类型 描述
数字 元素的顶部位置，以像素计。

浏览器支持

所有浏览器都支持 element.offsetTop：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 支持 支持 支持 支持 支持