client、offset、scroll相关属性
在动态获取元素的位置和鼠标位置时，总是被诸如offset、client和scroll等种类所困惑，这些位置属性之间到底有什么差异，到底我该怎样获取我想要的位置。
offset相关属性
- offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。
- offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。
- offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。
- offsetLeft：元素的左外边框至包含元素的左内边框之间的像素距离。
什么是当前元素的包含元素？可以理解为父级DOM结点中离得最近的具有大小（宽高不为0）的元素，可以通过offsetParent属性来访问这个包含元素！
client相关属性
- clientWidth：元素内容区宽度加上左右内边距（padding）宽度；
- clientHeight：元素内容区高度加上上下内边距（padding）高度；
- clientTop：元素的上边框的高度，以像素表示；若上下两端出现水平滚动条，则应加上滚动条的高度。
- clientLeft：元素的左边框的宽度，以像素表示；若左右两侧出现垂直滚动条，则应加上滚动条的宽度。
scroll相关属性
- scrollWidth：元素内容的总宽度，包含滚动内容的宽度；
- scrollHeight：元素内容的总高度，包含滚动内容的高度；
- scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。
- scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
MouseEvent中的相关属性
MouseEvent对象即专门用来处理鼠标事件的事件对象；其中有些属性与上面的DOM属性有关；
- offsetX：鼠标
x位置距离元素左内边框的距离； - offsetY：鼠标
y位置距离元素上内边框的距离； - clientX：鼠标位于元素客户端区域（
client dimension）中的x坐标； - clientY：鼠标位于元素客户端区域（
client dimension）中的y坐标； - screenX：鼠标在整个屏幕中的
x坐标； - screenY：鼠标在整个屏幕中的
y坐标； - pageX：鼠标位于整个文档（包括水平和垂直滚动条滚动的内容）的水平（x）位置；
- pageY：鼠标位于整个文档（包括水平和垂直滚动条滚动的内容）的垂直（y）位置；
以上属性都是只读属性，所以改动并不会使鼠标位置发生改变！！！元素客户端区域指的是元素内容及其内边距所占据的空间。