js中各种长度的含义

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。 可视宽度+隐藏宽度
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。 width+左右padding
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。width+左右padding+左右border
各Height同理

clientTop：上边框宽度
offsetTop：元素的上外边缘到最近定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘到文档内壁的距离。
scrollTop：对象实际内容的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。

所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。

鼠标事件发生时
clientX：鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 不随滚动条滚动而改变；
clientY：鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 不随滚动条滚动而改变；
pageX：鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角x轴的坐标； 随滚动条滚动而改变；
pageY：鼠标相对于浏览器（这里说的是浏览器的有效区域）左上角y轴的坐标； 随滚动条滚动而改变；
screenX：鼠标相对于显示器屏幕左上角x轴的坐标；
screenY：鼠标相对于显示器屏幕左上角y轴的坐标；
offsetX：鼠标相对于事件源左上角X轴的坐标
offsetY：鼠标相对于事件源左上角Y轴的坐标

下面放一张某位大佬做的图，标记的很详细。