JavaScript计算页面元素位置相关知识

鼠标事件的event对象的属性

clientX: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最左端之间的距离(不包括页面滚动距离)。

clientY: 设置或获取鼠标当前位置和浏览器窗口中当前可见区域的最顶端之间的距离(不包括页面滚动距离)。

screenX: 设置或获取鼠标当前位置和整个电脑屏幕最左端之间的距离(不包括页面滚动距离)。

screenY: 设置或获取鼠标当前位置和整个电脑屏幕最顶端之间的距离(不包括页面滚动距离)。

clientWidth: 浏览器窗口中当前可见区域宽度（即浏览器窗口的宽度），不包滚动条等边线，会随窗口的显示大小改变。

clientHeight: 浏览器窗口中当前可见区域高度（即浏览器窗口的高度），不包滚动条等边线，会随窗口的显示大小改变。

scrollWidth: 是当前网页的实际内容的宽，不包括边线宽度，会随对象中内容的多少改变，但不会随当前浏览器窗口的大小改变。

scrollHeight: 是当前网页的实际内容的宽，不包括边线高度，会随对象中内容的多少改变，但不会随当前浏览器窗口的大小改变。

scrollLeft: 浏览器当前水平方向滚动的距离。

scrollTop: 浏览器当前垂直方向滚动的距离。

下面这四个属性，与渲染模式无关。

offsetWidth: 是对象的宽，包括边线宽度，会随对象中内容的多少改变。

offsetHeight: 是对象的宽，包括边线高度，会随对象中内容的多少改变。

offsetLeft: 返回当前元素的左边界到它的包含元素的左边界的偏移量，以像素为单位。一般是对象顶端相对于整个文档的左端的距离，若为绝对定位，且外部有relative元素（注意此元素padding或者border-width大于0时情况），则返回其距离此元素的距离（包括页面滚动的距离，如果页面布局不变，只是滚动滚轮的话，这个值是不变的）。

offsetTop: 返回当前元素的上边界到它的包含元素的上边界的偏移量，以像素为单位。一般是对象顶端相对于整个文档的顶端的距离，若为绝对定位，且外部有relative元素，则返回其距离此元素的距离（同offsetLeft)。