正确的方法是使用
element.getBoundingClientRect()：
var rect = element.getBoundingClientRect();console.log(rect.top, rect.right, rect.bottom, rect.left);
Internet Explorer自从你很可能就一直在支持此功能，并且最终在CSSOM Views中对其进行了标准化。所有其他浏览器很早以前就采用了它。
一些浏览器还返回height和width属性，尽管这是非标准的。如果你担心与旧版浏览器的兼容性，请查看此答案的修订版以实现优化的降级实现。
返回的值
element.getBoundingClientRect()是相对于视口的。如果你需要相对于另一个元素的矩形，只需从另一个矩形中减去一个矩形：
var bodyRect = document.body.getBoundingClientRect(), elemRect = element.getBoundingClientRect(), offset = elemRect.top - bodyRect.top;alert('Element is ' + offset + ' vertical pixels from <body>');
