js中各种位置相关的属性难以区分，特来整理一下

参考图.jpg

1.获取宽高

• body的宽度

  浏览器可视文档区域宽度-左右margin

• body的高度

  默认是内容撑开的，如果没有内容，值是0

• clientWidth / clientHeight

  内容宽高 + padding - 滚动条宽高（如果有），不包括margin和边框

  document.documentElement.clientWidth 文档可视区域宽高-滚动条宽高

• offsetWidth / offsetHeight

  计算元素的可视宽度 border、padding计算在内，不包括margin

  1. document.body.offsetWidth是可视区域宽度-margin
  2. document.body.offsetHeight是实际内容-margin

• scrollWidth / scrollHeight

  实际内容的宽度 (小于width就是width) +padding

  document.documentElement.scrollHeight

  1. 如果有内容,并且小于文档可视高度;
  2. 如果内容超出可视高度，则高度是实际内容高度
  3. 或者没有内容,这个高度就是文档可视高度

2. 获取位置

• clientLeft / clientTop

  内容区域的左上角相对于整个元素左上角的位置（包括边框）

  clientLeft=左侧边框的宽度，clientTop＝顶部边框的宽度

• offsetLeft / offsetTop

  计算元素相对于参照物的位置(相对于最近的祖先元素定位)

  当div有父容器，且父容器定位了，offsetLeft = left + marginLeft

• scrollTop

  位于对象最顶端和窗口中可见内容的最顶端之间的距离，

  简单地说就是滚动后被隐藏的高度。

• 图解 event.offsetX，event.clientX，event.pageX，event.screenX属性

  参照图.jpg

• clientX / clientY

  相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），

  可视区域不包括工具栏和滚动条。

  • 参照下图：
  19000302-5d293ca2eb3ade2e.png

  • 计算鼠标的页面绝对位置

    var x = e.clientX + document.body.scrollLeft || document.documentElement.scrollLeft;
    var y = e.clientY + document.body.scrollTop || document.documentElement.scrollTop;
    

• offsetX、offsetY

  相对于带有定位的父盒子的x，y坐标

• pageX、pageY

  类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标 ，对于整个页面来说，包括了被卷去的body部分的长度

• screenX / screenY

  相对于用户显示器屏幕左上角的X,Y坐标 。

  如果有卷走的body内容，不会包括在内。

• layerX / layerY

  1. 如果当前目标元素没有定位，鼠标相对于父容器的左上角位置
  2. 如果有定位（有e.target)，它的值和offsetX，offsetY相同

• movementX / movementY

  1. 仅针对mousemove事件，上次移动坐标和当前移动坐标的差值
  2. 负数是向左向上，正数是向下向右

参考博客出处