HTML DOM Element offsetTop 属性

定义和用法

offsetTop 属性返回相对于父级的顶部位置（以像素计）。此属性是只读的。

返回值包括：

  • 元素的顶部位置和外边距
  • 父的顶部内边距、滚动条和边框

请参阅：CSS 框模型教程

tiaozhengfu zongjie

所有块级元素都报告相对于偏移父级的偏移量：

  • offsetTop
  • offsetLeft
  • offsetWidth
  • offsetHeight

偏移父级指的是最近的具有非静态位置的祖先。

如果不存在偏移父级，则偏移量是相对于文档正文的。

另请参阅：

offsetLeft 属性

offsetWidth 属性

offsetHeight 属性

tiaozhengfu zongjie xingshi

kehuan zuitop xingshi

kehuan zuozuo xingshi

kehuan kuandu xingshi

kehuan gaoxingshi

shili

li例 1

huoqu "myDIV" de tiaozhengfu weizhi:

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

zishen shi yi yi

li例 2

huoqu "myDIV" de weizhi:

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

zishen shi yi yi

li例 3

chuangjian nianxing hangdaoluan:

// huoqu hangdaoluan
const navbar = document.getElementById("navbar");
// huoqu hangdaoluan de piao yi wei zhi
const sticky = navbar.offsetTop;
// dang ni dao da qi suo suo dong wei zhi shi, jiang sticky lei jia ru hangdaoluan. Liweichu suo suo dong wei zhi shi qu chu sticky lei.
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

zishen shi yi yi

yufa

fanhui top tiaozhengfu weizhi:

yuanze.tiaozhengfu

huiwan zhi

leixing miaoshu
shuzi yuanze de dizhong weizhi, yi xiaoxing jishi.

tuobie zhichi

suoyou xuexi quanbu tuobie dui chi yuanze.element.offsetTop:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
zhichi zhichi zhichi zhichi zhichi zhichi