前端：盒子模型offset、scroll、client，获取元素坐标

clipboard.png

offset系列——常用于获取元素位置
1.offsetWidth:元素内容+padding+border
2.offsetLeft：元素在左外边框至包含它的元素的左内边框之间的像素距离
3.offsetTop：同理。
4.offsetParent：最近的相对定位的父元素（https://www.jb51.net/article/117848.htm）

client系列——常用于获取元素大小
1.clientWidth：元素内容+padding
2.clientHeight：同理

scroll系列——常用于获取元素滚动距离
1.scrollWidth：没有滚动条时的实际内容宽度+padding
2.scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置
3.scrollTop：同理

获取位置的方法代码

function getPos(elem) {
  var offset = getOffsets(elem);
  var scroll = getScrolls(elem);
  return {
    x: offset.x - scroll.x,
    y: offset.y - scroll.y
  };

  function getOffsets(elem) {
    var position = {
      x: 0,
      y: 0
    };
    while (elem && !isBody(elem)) {
      position.x += elem.offsetLeft;
      position.y += elem.offsetTop;
      elem = elem.offsetParent;
    }
    return position;
  }

  function getScrolls(elem) {
    var position = {
      x: 0,
      y: 0
    };
    while (elem && !isBody(elem)) {
      position.x += elem.scrollLeft;
      position.y += elem.scrollTop;
      elem = elem.parentNode;
    }
    return position;
  }

  function isBody(element) {
    return (/^(?:body|html)$/i).test(element.tagName);
  }
}