1.document.documentElement.getBoundingClientRect
MSDN對此的解釋是：
Syntax
oRect = object.getBoundingClientRect()
Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.
翻譯成中文是：該方法獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗的位置。下面用圖說明下。
該方法已經不再只是適用IE了，FF3.0+和Opera9.5+已經支援了該方法，可以說在獲得頁面元素位置上效率能有很大的提高，在以前版本的Opera和Firefox中必須通過迴圈來獲得元素在頁面中的絕對位置。
下面的代碼舉了個簡單的例子，可以滾動捲軸之後點紅色地區看各個值的變化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<body style="width:2000px; height:1000px;">
<div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo為了方便就直接用絕對位置的元素</div>
</body>
</html>
<script>
document.getElementById('demo').onclick=function (){
if (document.documentElement.getBoundingClientRect) {
alert("left:"+this.getBoundingClientRect().left)
alert("top:"+this.getBoundingClientRect().top)
alert("right:"+this.getBoundingClientRect().right)
alert("bottom:"+this.getBoundingClientRect().bottom)
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;
alert("Demo的位置是X:"+X+";Y:"+Y)
}
}
</script>
有了這個方法，擷取頁面元素的位置就簡單多了，
var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
2.要擷取當前頁面的捲軸縱座標位置，用：
document.documentElement.scrollTop
而不是
document.body.scrollTop
documentElement 對應的是 html 標籤，而 body 對應的是 body 標籤。
在標準w3c下，document.body.scrollTop恒為0，需要用document.documentElement.scrollTop來代替.
如果你想定位滑鼠相對於頁面的絕對位置時，你會發現google裡面1000篇文章裡面有999.99篇會讓你使用event.clientX+document.body.scrollLeft，event.clientY+document.body.scrollTop
,如果你發現你的滑鼠定位偏離了你的想象，請不要奇怪，這是再正常不過的事情。
ie5.5之後已經不支援document.body.scrollX對象了。
所以在編程的時候，請加上這樣的判斷
if (document.body && document.body.scrollTop && document.body.scrollLeft)
{
top = document.body.scrollTop;
left = document.body.scrollleft;
}
if (document.documentElement && document.documentElement.scrollTop && document.documentElement.scrollLeft)
{
top = document.documentElement.scrollTop;
left = document.documentElement.scrollLeft;
}
文章來源：1.http://www.cnblogs.com/qieqing/archive/2008/10/06/1304399.html
2.http://solodu.javaeye.com/blog/574912
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
