javascript 精確擷取頁面元素的位置

複製代碼 代碼如下://取得元素x座標
function pageX(elem) {
return elem.offsetParent?(elem.offsetLeft+pageX(elem.offsetParent)):elem.offsetLeft;
}
//取得元素y座標
function pageY(elem) {
return elem.offsetParent?(elem.offsetTop+pageY(elem.offsetParent)):elem.offsetTop;
}

貌似這位大神在出這本書時比較趕，有許多紕漏，最後大神也發覺這兩個函數有問題，並沒有把它們運用到JQuery中。由於是用累加的方式去計算，只要一個元素出現問題，就有可能層層被大，因此我在精確擷取樣式屬性時就摒棄這種方法。主要誤算參照大神的結論：
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
Miscalculation of absolutely positioned elements.

隨著新銳瀏覽器都支援IE的getBoundingClientRect方法，我們得以用更簡單更快捷更安全的方法來定位頁面元素。getBoundingClientRect返回的是一個集合，分別為元素在瀏覽器可視區的四個角的座標。

不過它在IE的標準模式存在一個奇怪的問題，html元素是有border的，預設是２px，並且是不可修改的；怪癖模式是沒有的。詳見http://msdn.microsoft.com/en-us/library/ms536433(VS.85).aspx

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.

我們做一些測試（請分別在IE6與IE8中進行）：

1、標準模式，沒有重設html的border

dir="ltr" lang="zh-CN">

運行代碼