JS中获取DOM元素的绝对位置实例详解-创新互联
在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置，例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中，当页面滚动超过了它的位置，就会始终悬浮在左侧。
本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性。关于如何获取 DOM 元素高度和滚动高度，请参考视口的宽高与滚动高度 一文。
概述
这些是本文涉及的 API 对应的文档和标准，供查阅：
| API | 用途 | 文档 | 标准 |
|---|---|---|---|
| offsetTop | 相对定位容器的位置 | MDN | CSSOM View Module |
| clientTop | 上边框宽度 | MDN | CSSOM View Module |
| .getBoundingClientRect() | 元素大小和相对视口的位置 | MDN | CSSOM View Module |
| .getClientRects() | 所有子 CSS 盒子的大小和位置 | MDN | CSSOM View Module |
| .getComputedStyle() | 应用所有样式表和计算之后的 CSS 属性 | MDN | DOM Level 2 Style CSSOM |
offsetTop/offsetLeft
HTMLElement.offsetTop 用来获取当前元素（不包括上边框）相对于定位容器（positioning container）的位置。也就是说，
如果所有祖先元素都是静态定位 position:static;（这是默认的情况），offsetTop 表示与文档最上方的高度差（文档最上方可能已经滚出视口，这个高度可能大于视口高度）。
如果存在绝对定位的祖先元素 position:absolute/fixed，offsetTop 就会相对于这个元素。因此为了获取相对于文档最上方的高度差，需要递归地调用：
function getOffsetTop(el){
return el.offsetParent
? el.offsetTop + getOffsetTop(el.offsetParent)
: el.offsetTop
}另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
当前标题：JS中获取DOM元素的绝对位置实例详解-创新互联
分享路径：http://shouzuofang.com/article/dpesid.html