getBoundingClientRect计算页面元素的offsetLeft、offsetTop
2010-04-09 15:56
351 查看
新做一个组件,在网站内使用很广泛,不想依赖任何框架,纯手工打造,结果发现以前常用的计算offsetLeft、offsetTop的函数有时候不好用了,算出的值不对。
网上很流行的方法,不用框架时,我就用这方法:
firefox中到某些元素的offsetTop的值不对,反复测试发现和其父元素定位方式有关系,父元素用fixed定位,得到的offsetTop并没有加documentElement.scrollTop的值。用jquery.offset()方法就不存在这个问题,顺藤摸瓜看了看jquery源码,offset方法很复杂,如果documentElement有getBoundingClientRect方法,它用getBoundingClientRect去计算offset,如果没有这方法就惨了,要得到精确地offset就需要考虑元素是否表格单元格、父元素的position情况。从这点可以看出jquery基础库的功力不一般,兼容性做得很细致。
ff3.5 ie6以上 safari opera chrome都支持getBoundingClientRect方法,如果对兼容性要求不是很高可以用下面的代码
计算时需要减去clientTop clientLeft,否则有时还是会差几个像素。
网上很流行的方法,不用框架时,我就用这方法:
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,否则有时还是会差几个像素。
相关文章推荐
- getBoundingClientRect计算页面元素的offsetLeft、offsetTop
- 如何获取页面中任意元素的offsetLeft和offsetTop
- JavaScript如何获取/计算页面元素的offset?
- javascript和Jq获取和设置页面元素到顶部、左部距离、宽高元素卷入部分(scroll、scrollTop、scrollLeft、offset、offsetTop、offsetLeft)
- html--offsetLeft,Left,clientLeft的关键--动态获取计算元素位置关系
- 无定位父元素时offsetParent为body,但是offsetTop/offsetLeft计算距离从html开始
- CSS专题(二):元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth s
- 页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理
- javascript获得元素的尺寸和位置一 : offsetTop/Left、offsetWidth/Height、offsetParent
- JavaScript计算页面元素位置相关知识
- js 计算页面某个元素距离页面顶端的距离
- DOM元素的各种尺寸offsetHeight/Width,clientHeight/clientWidth,offsetLeft/Top,
- 获取页面某一元素的绝对X,Y坐标,可以用offset()方法
- :元素大小与位置offsetLeft offsetTop offsetWidth offsetHeight clientWidth clientHeight scrollWidth scrollHei
- JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
- 遍历list集合,把每个元素的值对应的计算结果展示在页面上
- jquery 计算页面滚动到某个元素的速度
- 使用jquery改变元素在页面的位置--offsetTop,screenTop,clientTop关系及理解
- JS:body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
- 元素的offsetParent offsetLeft offsetTop属性