javascript中各种width,height,left,top的总结

下面是对javascript中常用的一些定位做总结。

1. clientHeight：块级元素的(padding-top) + height+ (padding-bottom)；

2. clientWidth：块级元素的(padding-left) + width + (padding-right)；

3. offsetHeight：块级元素的(padding-top) + height+ (padding-bottom) +(border-top) + (border-bottom)；

4. offsetWidth：块级元素的(padding-left) + width + (padding-right) +(border-left) + (border-right)；

5. offsetLeft：块级元素的左边框相对于它的绝对父级元素的左边框之间的距离（在ie8,chrome,firefox中成立，如果是在ie7，则是相对于它的真实父级元素而言的）；

6. offsetTop：块级元素的上边框相对于它的绝对父级元素的上边框之间的距离（在ie8,chrome,firefox中成立，如果是在ie7，则是相对于它的真实父级元素而言的）；

【这里要注意的是，使用查找功能时，用offsetLeft和使用style.left是一样的效果，但是使用style.left可对元素的left进行修改，修改不能使用offsetLeft。对应到offsetTop及style.top也是同理。】

7. scrollHeight：滚动条卷起的长度加上窗口长度大小（页面长度实际大小）

8. scrollWidth：滚动条向左卷长度加上窗口宽度大小（页面宽度实际大小）

9. scrollTop:如果有两个窗口，outter包含着inner, 那么只有当outter小于inner的时候scrollTop的值才不为0，才能对scrollTop进行修改操作。而scrollTop不会大于(inner的Height减去outter的Height)这一个长度，如果大于，那么取(inner的Height减去outter的Height)。总的来说：scrollTop就是容器里面的内容“卷起”的值。

10scrollLeft也是同样的道理。