clientWidth,offsetWidth,scrollHeight等

 

 

下面介绍一下每个字段的含义

• clientLeft,clientTop
  表示一个元素的 左/顶部 边框的宽度，以像素表示, 不包括左外边距margin和左内边距padding
• clientWidth,clientHeight
  内容+内边距         -----不包括边框和外边距、滚动条  == 可视内容
• clientX、clientY
  点击等事件发生时鼠标在浏览器内容区域的坐标。

       浏览器内容区域就是浏览器窗口中用来显示网页的可视区域，不包括滚动条和工具栏，也不随滚动条的移动而移动。
        当浏览器窗口缩小时，e.clientX/e.clientY的最大值也会缩小。 

• offsetLeft,offsetTop
  子元素的border与最近的祖先定位元素border的距离   是数值
• offsetParent
  是一个只读属性，返回距离该子元素最近的进行过定位的父元素（position：absolute  relative fixed），如果其父元素中不存在定位则offsetParent为：body元素。
• offsetWidth,offsetHeight
  元素的宽度（内容+内边距+边框+滚动条宽度）            ==整体，整个控件
• offsetX, offsetY
  点击等事件发生时鼠标相对于事件源元素的坐标，事件源元素就是绑定事件的那个元素。
• scrollLeft,scrollTop
  元素滚动的距离大小
• scrollWidth,scrollHeight
  内容+内边距+溢出尺寸      -----不包括边框和外边距     ==实际内容        

        scrollWidth = scrollLeft+clientWidth

        当无需滚动条时, scrollWidth = clientWidth

• pageX、pageY
  返回相对于整个文档的左边缘单击鼠标的X（水平）坐标，包括当前滚动不可见的文档的任何部分

        当没有滚动条滚动时, pageX = clientX

• screenX、screenY
  点击位置距离当前电脑屏幕左上角的x，y坐标, 最大值不会超过屏幕分辨率。
• x、y
  和screenX、screenY一样