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://cdxtjz.com/article/dpesid.html

JS中获取DOM元素的绝对位置实例详解-创新互联

其他资讯