获取元素周边大小

1.clientLeft 和clientTop

这组属性可以获取元素设置了左边框和上边框的大小。

box.clientLeft; //获取左边框的宽度

box.clientTop; //获取上边框的宽度

PS：目前只提供了Left 和Top 这组，并没有提供Right 和Bottom。如果四条边宽度不

同的话，可以直接通过计算后的样式获取，或者采用以上三组获取元素大小的减法求得。

2.offsetLeft 和offsetTop

这组属性可以获取当前元素相对于父元素的位置。

box.offsetLeft; //50

box.offsetTop; //50

PS：获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；否则

不同的浏览器会有不同的解释。

PS：加上边框和内边距不会影响它的位置，但加上外边据会累加。

box.offsetParent; //得到父元素

PS：offsetParent 中，如果本身父元素是，非IE 返回body 对象，IE 返回html 对

象。如果两个元素嵌套，如果上父元素没有使用定位position:absolute，那么offsetParent 将

返回body 对象或html 对象。所以，在获取offsetLeft 和offsetTop 时候，CSS 定位很重要。

如果说，在很多层次里，外层已经定位，我们怎么获取里层的元素距离body 或html

元素之间的距离呢？也就是获取任意一个元素距离页面上的位置。那么我们可以编写函数，

通过不停的向上回溯获取累加来实现。

box.offsetTop + box.offsetParent.offsetTop; //只有两层的情况下

如果多层的话，就必须使用循环或递归。

function offsetLeft(element) {

var left = element.offsetLeft; //得到第一层距离

var parent = element.offsetParent; //得到第一个父元素

while (parent !== null) { //如果还有上一层父元素

left += parent.offsetLeft; //把本层的距离累加

parent = parent.offsetParent; //得到本层的父元素

} //然后继续循环

return left;

}

3.scrollTop 和scrollLeft

这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。

box.scrollTop; //获取滚动内容上方的位置

box.scrollLeft; //获取滚动内容左方的位置

如果要让滚动条滚动到最初始的位置，那么可以写一个函数：

function scrollStart(element) {

if (element.scrollTop != 0) element.scrollTop = 0;

}

感