原生js获取dom元素节点的偏移量

如果有用过jQuery的童鞋，就一定不会忘记$('').offset()这个 api 的强大功能，这个 api 可以轻易获取元素的偏移量，那么如果我们不用jQuery该怎么实现呢？

我们先来看看例子：

var getOffset = function(el) {
  var scrollTop =
    el.getBoundingClientRect().top +
    document.body.scrollTop +
    document.documentElement.scrollTop;
  var scrollLeft =
    el.getBoundingClientRect().left +
    document.body.scrollLeft +
    document.documentElement.scrollLeft;
  return {
    top: scrollTop,
    left: scrollLeft
  };
};

首先我们先来看getBoundingClientRect()这个方法。

getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。返回值是一个 DOMRect 对象，是与该元素相关的 CSS 边框集合 。

然后就是document.body.scrollTop 跟 document.documentElement.scrollTop这两个是一个功能，只不过在不同的浏览器下会有一个始终为 0，所以做了以上的兼容性处理。所以当我们做拖拽功能的时候，就可以依赖上以上属性。

使用方法如下：

var el = document.querySelector(".moveBox");
getOffset(el); // {top: xxx, left: xxx}

我们可以看上面的摇杆效果，这里就是利用了offset()去做位置判断。具体实现代码可以看：https://codepen.io/krischan77/pen/zYxPNPy