一、概念

可视区域：元素内容区域 + padding区域，即(width+左右padding，height+上下padding)为可视区域。如下图：

文档区域：承载文档内容的区域。有滚动条的时候，我们拉动滚动条，文档区域会同时往上滚动，进入一个不可见区域。

二、鼠标事件属性

clientX：鼠标到浏览器窗口的X坐标。（浏览器可视区域左上角为坐标原点）

clientY：鼠标到浏览器窗口的Y坐标。（浏览器可视区域左上角为坐标原点）

pageX：鼠标到浏览器文档的X坐标。（文档左上角为坐标原点）

pageX：鼠标到浏览器文档的Y坐标。（文档左上角为坐标原点）

offsetX：鼠标相对于触发事件的元素的X坐标。（触发事件元素左上角为坐标原点）

offsetY：鼠标相对于触发事件的元素的Y坐标。（触发事件元素左上角为坐标原点）

如果是红框div触发了鼠标事件，则：

screenX：鼠标相对于电脑显示器的X坐标。（屏幕左上角为坐标原点）

screenY：鼠标相对于电脑显示器的Y坐标。（屏幕左上角为坐标原点）

三、元素视图属性

参照上图理解：

clientWidth： 元素可视区域宽度 = width + 左右padding

clientHeight：元素可视区域高度 = height + 上下padding

offsetWidth：元素宽度 = width + 左右padding + 左右border

offsetHeight：元素高度 = height + 上下padding + 上下border

scrollWidth：元素内容实际宽度 = clientWidth + 水平滚动条可以拉动的最大宽度 = clientWidth + scrollLeft(水平滚动条拉到最右边时）

scrollHeight：元素内容实际高度 = clientHeight + 纵向滚动条可以拉动的最大高度 = clientHeight + scrollTop(纵向滚动条拉到最下边时)

scrollLeft：元素当前水平滚动条距离元素左边的距离。

scrollTop：元素当前纵向滚动条距离元素上边的距离。

offsetParent：距离当前元素最近的一个父级定位元素，(如果没有)直至body元素。

offsetLeft：元素(border开始)到offsetParent的左侧(不包含border）的距离。

offsetTop：元素(border开始)到offsetParent的顶部(不包含border）的距离。