clientwidth，offsetwidth，scrollWdith等区别

鼠标点击事件发生时：

  clientX：鼠标相对于浏览器（有效区）左上角x轴距离，不随滚动条滚动而改变

  clientY：~

  pageX:：鼠标相对于浏览器（有效区）左上角x轴距离，随滚动条滚动而改变

   pageY：~

   screenX:：鼠标相对于显示器屏幕左上角X轴坐标

   screenY：~

   offsetX：鼠标相对于事件源左上角x轴距离

   offsetY：~

 

clientWidth，scrollWidth，offsetWidth

clientWidth: 用于描述元素内尺寸宽度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分

clientHeight

offsetWidth：描述元素外尺寸宽度，是指 元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。

offsetHeight：

scrollWidth: ：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

scrollHeight：

 clinetLeft , offsetLeft, scrollLeft

clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度

clientTop:~

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括父容器的边框）。

offsetTop:~

scrollLeft:滚动条左边卷去的宽度

scrollTop:~

一些公式：

pageX =clientX+scrollLeft

转载于:https://www.cnblogs.com/celine-huang/p/11128068.html