Client

clientWidth，clientHeight width + padding，元素的宽度高度都会把内边距计算在内，不包括边框，外边距，滚动条. 個人理解為 content-box

clientTop，clientLeft : border-width 元素内边距到其边框的距离，

clientX，clientY : 当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；

 

当出现滚动条时，两种情况

clientLeft 不计算滚动条宽度

 

 

 

clientLeft 计算滚动条宽度

 

 

 

 

Offset

 offsetWidth，offsetheight : width + padding + border, 個人理解為 border-box

offsetTop，offsetLeft 其内边距到与其最近祖先元素的距离（受定位影响）

offsetX，offsetY 当鼠标事件发生时，鼠标相对于事件源x轴的位置

 

 

 

clientX,clientY,screenX,screenY,offsetX,offsetY区别

1 clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
2 clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
3 screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
4 screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
5 offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
6 offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

 

scrollTop

 

 

scrollHeight