xxxWidth、xxxHeight、xxxTop/xxxLef

一、概览

clientHeight clientWidth clientTop clientLeft
offsetHeight offsetWidth offsetTop offsetLeft
scrollHeight scrollWidth scrollTop scrollLeft

二、表示区域

①xxxWidth部分

clientWidth：width+padding2-滚动条的宽度
offsetWidth：width+padding2+border*2
scrollWidth：内容<可视区域，则scrollWidth=offsetWidth；
内容>可视区域，则scrollWidth=width+(padding-left)
（注：滚动条的宽度包含在padding内，大于padding的宽时，则会占用一部分的content宽）

②xxxHeight部分（规则与xxxWidth类似）

clientHeight：height+padding2-滚动条的宽度
offsetHeight：height+padding2+border*2
scrollHeight：内容<可视区域，则scrollHeight=offsetHeight；
内容>可视区域，则scrollHeight=height+(padding-top)

③xxxTop/xxxLeft部分

clientTop/clientLeft：即border-top/border-left
offsetTop/offsetLeft：offsetleft:元素相对于定位父级左内框的距离; offsetTop: 元素相对于定位父级顶部内框的距离。
scrollTop/ scrollLeft：已经向上/向左滚动的距离
（注：offsetParent表示离得最近的有定位(且非static)祖先元素，若无定位父元素，则offsetParent为body）

三、图解

四、小结

• offsetWidth/offsetHeight：对象的可见宽度/高度
• clientWidth/clientHeight：内容的可见宽度/高度
• scrollWidth/scrollHeight：完整的高度和宽度/高度
• offsetLeft/offsetTop：相对于已定位元素的偏移值。
• clientTop/clientLeft：该可视区域的上/左边框
• scrollLeft/scrollTop：已经向上/向左滚动的距离

五、应用

例子：将div的滚动条滚动到div（以下简称parent）中某个元素（以下简称child）的位置

思路：
1、将parent设置为child的offsetParent（方法：把parent设置为定位元素）
2、计算child距离parent的offsetTop（方法：offsetTop=child.offsetTop）
3、将parent的scrollTop设置为child的offsetTop的值（方法：parent.scrollTop=offsetTop）