CSSOM视图模式(CSSOM View Module)相关整理：scrollWidth，scrollLeft，offsetLeft，clientX ，offsetX 定义和区别

Posted 2020-07-13 度

转：http://www.zhangxinxu.com/wordpress/2011/09/cssom%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%BC%8Fcssom-view-module%E7%9B%B8%E5%85%B3%E6%95%B4%E7%90%86%E4%B8%8E%E4%BB%8B%E7%BB%8D/

四、元素视图属性

关于元素大小位置等信息的一些属性。有：
clientLeft和clientTop
clientWidth和clientHeight
offsetLeft和offsetTop
offsetParent
offsetWidth和offsetHeight
scrollLeft和scrollTop
scrollWidth和scrollHeight

 

clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像数值？)

clientWidth,clientHeight:内容区域的宽高，不包括边框宽度值。

offsetLeft,offsetTop:相对于最近的祖先定位元素。

offsetParent:某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 得到body...

offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)

scrollLeft,scrollTop:元素滚动的大小

scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollTop+clientWidth

 

 

 

scrollWidth:获取对象的滚动宽度 
scrollHeight: 获取对象的滚动高度。 
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标 
event.clientY 相对文档的垂直座标 
event.offsetX 相对容器的水平坐标 
event.offsetY 相对容器的垂直坐标

 

scrollHeight： 对象的滚动高度（滚动条的高度，可滚动的高度）

scrollWidth： 对象的滚动宽度（同上）

scrollLeft： 对象左边界和窗口中目前可见内容的左端之间的距离（滚动条已滚动的距离）

scrollTop： 对象最顶端和窗口中可见内容的最顶端之间的距离（同上）

offsetHeight： 对象相对于版面或offsetParent 的高度（可见部分的宽度加上滚动条实体的宽度）

offsetWidth： 对象相对于版面或offsetParent 的宽度

offsetLeft： 对象相对于版面或由 offsetParent 左侧位置

offsetTop：对象相对于版面或由 offsetTop 顶端位置

clientX： 相对文档的水平坐标

clientY： 相对文档的垂直坐标

clientWidth：相对文档的宽度（可见部分的宽度）

clientHeight：相对文档的高度

event.offsetX： 相对容器的水平坐标

event.offsetY ： 相对容器的垂直坐标