JavaScript DOM元素尺寸和位置

 // 这组属性可以获取当前元素边框相对于父元素边框的位置; box.offsetLeft;                  // 50; // PS:获取元素当前相对于父元素的位置,最好将它设置为定位position:absolute; // PS:加上边框和内边距不会影响它的位置,但加上外边据会累加; box.offsetParent;                 // 得到父元素; // PS:offsetParent中,如果本身父元素是,非IE返回body对象,IE返回html对象; // 如果两个元素嵌套,如果上级父元素没有使用定位position:absolute,那么offsetParent将返回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;                 // 得到最终距离; } 

 // 这组属性可以获取被滚动条隐藏的区域大小,也可设置定位到该区域; box.scrollTop;                  // 获取滚动内容上方的位置; // 设置滚动条滚动到最初始的位置; function scrollStart(element){ if(element.scrollTop != 0){ element.scrollTop = 0; } }

 // 这个方法返回一个矩形对象,包含四个属性:left/top/right和bottom; // 分别表示元素各边与页面上边和左边的距离; var box = document.getElementById('box'); alert(box.getBoundingClientRect().top);    // 元素上边距离页面上边的距离; alert(box.getBoundingClientRect().right);   // 元素右边距离页面左边的距离; alert(box.getBoundingClientRect().bottom);   // 元素下边距离页面上边的距离; alert(box.getBoundingClientRect().left);    // 元素左边距离页面左边的距离; // PS:IE/Firefox/Opera/Chrome/Safari都支持; // 但在IE中,默认坐标从(2,2)开始计算,导致最终距离比其他浏览器多出两个像素; document.documentElement.clientTop;      // 非IE为0,IE为2; document.documentElement.clientLeft;      // 非IE为0,IE为2; // 兼容getBoundingClientRect() function getRect(element){ var rect = element.getBoundingClientRect(); var top = document.documentElement.clientTop; var left = document.documentElement.clientLeft; return { top:rect.top-top,           // 元素上边距-页面的上边距(0-0或2-2); bottom:rect.bottom-top, left:rect.left-left,         // 元素左边距-页面的左边距(0-0或2-2); right:rect.right-left } };