getBoundingClientRect计算页面元素的offsetLeft、offsetTop

新做一个组件，在网站内使用很广泛，不想依赖任何框架，纯手工打造，结果发现以前常用的计算offsetLeft、offsetTop的函数有时候不好用了，算出的值不对。

 

网上很流行的方法，不用框架时，我就用这方法：function getOffsetPosition(element){ var posTop = 0, posLeft = 0; do { posTop += element.offsetTop || 0; posLeft += element.offsetLeft || 0; element = element.offsetParent; } while (element); return [posLeft, posTop]; }

firefox中到某些元素的offsetTop的值不对，反复测试发现和其父元素定位方式有关系，父元素用fixed定位，得到的offsetTop并没有加documentElement.scrollTop的值。用jquery.offset()方法就不存在这个问题，顺藤摸瓜看了看jquery源码，offset方法很复杂，如果documentElement有getBoundingClientRect方法，它用getBoundingClientRect去计算offset，如果没有这方法就惨了，要得到精确地offset就需要考虑元素是否表格单元格、父元素的position情况。从这点可以看出jquery基础库的功力不一般，兼容性做得很细致。

 

ff3.5 ie6以上 safari opera chrome都支持getBoundingClientRect方法，如果对兼容性要求不是很高可以用下面的代码var getOffsetPosition=function(elem){ if ( !elem ) return {left:0, top:0}; var top = 0, left = 0; if ( "getBoundingClientRect" in document.documentElement ){ //jquery方法 var box = elem.getBoundingClientRect(), doc = elem.ownerDocument, body = doc.body, docElem = doc.documentElement, clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, top = box.top + (self.pageYOffset || docElem && docElem.scrollTop || body.scrollTop ) - clientTop, left = box.left + (self.pageXOffset || docElem && docElem.scrollLeft || body.scrollLeft) - clientLeft; }else{ do{ top += elem.offsetTop || 0; left += elem.offsetLeft || 0; elem = elem.offsetParent; } while (elem); } return {left:left, top:top}; }

计算时需要减去clientTop clientLeft，否则有时还是会差几个像素。