HTML DOM offsetTop 属性：你所不知道的页面元素位置获取方式

什么是 offsetTop 属性？

在前端开发中，我们经常需要获取页面元素的位置信息，比如元素距离文档顶部的距离，这个时候就可以使用 offsetTop 属性。

var el = document.getElementById("myElement");
var top = el.offsetTop;

上面的代码可以获取 id 为 myElement 的元素距离文档顶部的距离。

offsetTop 与 offsetParent

在使用 offsetTop 属性时，需要注意元素的 offsetParent 属性。

offsetParent 属性指向最近的已定位（position 不为 static）的祖先元素，如果没有已定位的祖先元素，则指向 body 元素。

我们可以通过以下代码来获取元素的 offsetParent：

var el = document.getElementById("myElement");
var parent = el.offsetParent;

如果我们想要获取元素相对于文档顶部的距离，需要使用一个循环来遍历元素的 offsetParent：

var el = document.getElementById("myElement");
var top = el.offsetTop;
var parent = el.offsetParent;
while(parent){
  top += parent.offsetTop;
  parent = parent.offsetParent;
}

这样就可以获取元素相对于文档顶部的距离了。

offsetTop 与滚动条

在使用 offsetTop 属性时，还需要注意页面的滚动条。

假设有一个元素距离文档顶部的距离是 100px，但是页面向下滚动了 50px，那么元素相对于视口顶部的距离就是 50px。

如果我们想要获取元素相对于视口顶部的距离，需要使用以下代码：

var el = document.getElementById("myElement");
var rect = el.getBoundingClientRect();
var top = rect.top + window.scrollY;

通过 getBoundingClientRect() 可以获取元素相对于视口的位置信息，然后加上滚动条的距离就可以得到元素相对于视口顶部的距离。

结语

使用 offsetTop 属性可以轻松地获取页面元素的位置信息，但是需要注意元素的 offsetParent 和页面的滚动条。

在实际开发中，如果需要频繁地获取元素的位置信息，建议使用第三方库，比如 jQuery 中的 offset() 方法。