JavaScript 获取元素位置：getBoundingClientRect() 详解

getBoundingClientRect() 获取元素位置详解

该方法返回一个对象，包含 left、right、top 和 bottom 四个属性，分别表示元素左上角和右下角相对于浏览器视口（viewport）左上角的距离。

因此，网页元素的相对位置可以通过以下方式计算：

var X= this.getBoundingClientRect().left;

var Y =this.getBoundingClientRect().top;

若要获取绝对位置，需在此基础上加上页面的滚动距离：

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+ 以及 Opera 9.5+ 均支持此方法，而 Firefox 2.x、Safari、Chrome 和 Konqueror 则不支持。