元素视图属性

转：https://www.cnblogs.com/lixia...

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

详解：
1.clientLeft和clientTop
clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置（包括边框）。(取决于边框的像数值？)
2.clientWidth和clientHeight
clientWidth,clientHeight:内容区域的宽高，不包括边框宽度值。
3.offsetLeft和offsetTop
offsetLeft,offsetTop:相对于最近的祖先定位元素。
4.offsetParent
offsetParent:某元素的父元素 例如：this.offsetParent.tagName.toLowerCase() 得到body...
5.offsetWidth和offsetHeight
offsetWidth,offsetHeight 整个元素的尺寸(不包括变宽的宽度)
6.scrollLeft和scrollTop
scrollLeft,scrollTop:元素滚动的大小
7.scrollWidth和scrollHeight
scrollWidth,scrollHeight:整个内容区域的宽度(包括需拉动滚动条隐藏起来的那些部分) scrollTop+clientWidth

相似属性进一步区分：
1.scroll相关的属性
scrollWidth：获取对象的滚动宽度
scrollHeight：获取对象的滚动高度。
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
2.offset相关的属性
offsetHeight：对象相对于版面或offsetParent 的高度（可见部分的宽度加上滚动条实体的宽度）
offsetWidth：对象相对于版面或offsetParent 的宽度
offsetLeft：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop：获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
3.client的相关属性
clientWidth：相对文档的宽度（可见部分的宽度）
clientHeight：相对文档的高度

event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
4.scroll的相关属性
scrollHeight：对象的滚动高度（滚动条的高度，可滚动的高度）
scrollWidth：对象的滚动宽度（同上）
scrollLeft：对象左边界和窗口中目前可见内容的左端之间的距离（滚动条已滚动的距离）
scrollTop：对象最顶端和窗口中可见内容的最顶端之间的距离（同上）