使用原生Javascript实现jQuery offset方法

什么是jQuery的offset方法？

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。

看个具体例子，直接上代码

实现效果截图

使用Javascript实现的思路

• 递归
• Element​.get​Bounding​Client​Rect()

我们通过遍历目标元素、目标元素的父节点、父节点的父节点......依次溯源，并累加这些遍历过的节点相对于其最近祖先节点（且 position 属性非 static）的偏移量，向上直到 document，累加即可得到结果。

其中，我们需要使用 JavaScript 的 offsetTop 来访问一个 DOM 节点上边框相对离其本身最近、且 position 值为非 static 的祖先元素的垂直偏移量。具体实现为：

实现截图

接下来，换一种思路，用一个相对较新的API：getBoundingClientRect来实现jQuery offset方法

getBoundingClientRect 方法

返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
[图片上传中...(rect.png-6dad39-1559057838375-0)]
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。

rect.png

代码实现：

实现截图

需要注意的细节：

• 第一个
  node.ownerDocument.documentElement

Node.ownerDocument 只读属性会返回当前节点的顶层的 document 对象。

看个示例

// 得到p元素所在文档的HTML节点
d = p.ownerDocument; 
html = d.documentElement;

• 第二个
  docElement.clientTop

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。