神马文学网使用getBoundingClientRect需要注意的地方
来源：百度文库 编辑：神马文学网 时间：2024/05/03 16:53:26
使用getBoundingClientRect需要注意的地方
Javascript2010-07-13 18:37:07阅读42评论0 字号：大中小 订阅
这次试验同样的也说明IETester与系统自带的IE浏览器的差异
页面代码如下：
getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分），firefox3+、chrome2+、opera9.63+都支持这个属性。
上面的代码可存为本地，然后在几个浏览器里运行得到的结果如下：
IE（系统自带的浏览器）：12---10
非IE（FF、Opera、Chrome）：10---10
所以这里需要注意的问题有两个：
1、要加上文档卷起的部分(scorll的值)
2、IE盒模型2px的差异
可是很奇怪的事情是，如果使用IETester去浏览、测试这个例子，全部都为10-10 奇怪，表现与系统自带的IE还不一样...
获取DOM元素的左顶点距离网页左顶点的位置方法就变成下面的了：
function getXY(el) {
var rect = el.getBoundingClientRect(),
scrollTop = Math.max(el.ownerDocument.documentElement.scrollTop,el.ownerDocument.body.scrollTop),
scrollLeft = Math.max(el.ownerDocument.documentElement.scrollLeft, el.ownerDocument.body.scrollLeft),
isIE = window.ActiveXObject ? 2 : 0,
_t = 0,
_l = 0;
_l = rect.left - isIE + scrollLeft;
_t = rect.top - isIE + scrollTop;
return [_t, _l];
}
不过在IETester中测试将会变成8了.........