JavaScript中的各种坐标和距离

距离/宽高：

screen.width：屏幕的宽度
screen.height：屏幕的高度

element.style.width：当前对象的宽度。
element.style.height：当前对象的高度。
element.style.left：当前对象的left值。
element.style.top：当前对象的top值。

element.offsetParent：当前对象的最近的定位父级元素
element.offsetWidth：当前对象的宽度（width+padding+border）
element.offsetHeight：当前对象的高度（Height+padding+border）
element.offsetLeft：当前对象到其 offsetParent 左边的距离
element.offsetTop：当前对象到其 offsetParent 上边的距离

element.clientWidth：获取对象可见内容的宽度（width + padding）
element.clientHeight：获取对象可见内容的高度（height + padding）
element.clientLeft：获取对象的左边框的宽度
element.clientTop：获取对象的上边框的宽度

element.scrollWidth：获取对象的滚动宽度
element.scrollHeight：获取对象的滚动高度
element.scrollLeft：就是元素有滚条的情况下，左滚的距离(width+padding一体)
element.scrollTop：这个就是元素中内容上滚的距离(height+padding一体)

坐标：

-client：
event.clientX/event.clientY：鼠标在当前body区域的x，y坐标
-screen：
event.screenX/event.screenY： 鼠标在当前电脑屏幕的x，y坐标
-offset：
event.offsetX/event.offsetY：鼠标在盒子中的x，y坐标

注：含padding，不包含border和margin

-layer：
event.layerX/event.layerY：offset 加 border
-XY：
event.x/event.y：同event.clientX和event.clientY
-page：
event.pageX和event.pageY：整个页面的区域，包括被卷去的body部分