详解原生js实现offset方法

下面是详解“详解原生js实现offset方法”的完整攻略。

什么是offset方法

offset() 是 jQuery 中的一个方法，用于获取元素相对于文档的偏移量。而原生 JavaScript 没有提供类似的方法，所以我们需要自己实现它。

实现offset方法的基本思路

获取元素本身的left、top值
获取元素的 offsetParent 元素，不断循环遍历，直到根元素，计算出整个元素相对于根元素的偏移量。
加上根元素的滚动量即可得到元素相对于文档可视区域的偏移量。

具体实现过程

function getOffset(ele) {
  var offset = {
    left: 0,
    top: 0
  };
  var parent = ele;

  while (parent !== null) {
    offset.left += parent.offsetLeft;
    offset.top += parent.offsetTop;
    parent = parent.offsetParent;
  }

  // 加上根元素的滚动量
  var root = document.documentElement || document.body;
  offset.left = offset.left - root.scrollLeft;
  offset.top = offset.top - root.scrollTop;

  return offset;
}

以上代码会计算出一个元素相对于根元素的偏移量。接下来我们看一个应用的示例。

示例1：获取元素相对于文档的偏移量

我们先来定义一个 HTML 元素。

<div id="ele">
  <p>Hello World!</p>
</div>

然后我们通过 JavaScript 代码来获取它的偏移量。

var ele = document.querySelector("#ele");
var offset = getOffset(ele);
console.log(offset);

运行结果：

{left: 25, top: 25}

从结果可以看出，元素 ele 相对于文档的偏移量是 {left: 25, top: 25}。因为我们没有设置它的 padding、margin 和 border，所以偏移量就是 25px。

示例2：获取元素相对于某个父元素的偏移量

现在我们来改变一下，让元素 ele 的父元素也有一些 padding、margin 和 border。

<div id="parent" style="padding: 10px; margin: 5px; border: 2px solid #f00;">
  <div id="ele">
    <p>Hello World!</p>
  </div>
</div>

接下来我们通过 JavaScript 代码来获取元素 ele 相对于元素 parent 的偏移量。

var ele = document.querySelector("#ele");
var parent = document.querySelector("#parent");
var eleOffset = getOffset(ele);
var parentOffset = getOffset(parent);
var offset = {
  left: eleOffset.left - parentOffset.left,
  top: eleOffset.top - parentOffset.top
};
console.log(offset);