IE、Firefox 3+、Safari 4+、Opera 9.5及Chrome为每个元素都提供了一个 getBoundingClientRect() 方法。这个方法返回会一个矩形对象，包含4个属性： left 、 top 、 right 和 bottom 。这些属性给出了元素在页面中相对于视口的位置。但是，浏览器的实现稍有不同。IE8及更早版本认为文档的左上角坐标是(2,2)，而其他浏览器包括IE9则将传统的(0,0)作为起点坐标。因此，就需要在一开始检查一下位于(0,0)处的元素的位置，在IE8及更早版本中，会返回(2,2)，而在其他浏览器中会返回(0,0)。来看下面的函数：
function getBoundingClientRect(element){
if (typeof arguments.callee.offset != “number”){
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement(“div”);
temp.style.cssText = “position:absolute;left:0;top:0;”;
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
}
这个函数使用了它自身的属性来确定是否要对坐标进行调整。第一步是检测属性是否有定义，如果没有就定义一个。最终的 offset 会被设置为新元素上坐标的负值，
实际上就是在IE中设置为-2，在Firefox和Opera中设置为-0。为此，需要创建一个临时的元素，将其位置设置在(0,0)，然后再调用其 getBoundingClientRect() 。而之所以要减去视口的 scrollTop ，是为了防止调用这个函数时窗口被滚动了。这样编写代码，就无需每次调用这个函数都执行两次 getBoundingClientRect() 了。接下来，再在传入的元素上调用这个方法并基于新的计算公式创建一个对象。
好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！