js擷取元素到文檔地區document的座標方法

 　　擷取頁面中元素到文檔地區document的橫向、縱向座標的兩種方法及其比較

　　在js控制元素運動的過程中，對於頁面元素座標位置的擷取是經常用到的，這裡主要總結下兩種方法：

　　一：通過疊加元素對象和它的offsetParent(如果存在)的offsetLeft/offsetTop屬性來實現

　　在閱讀javascript進階程式設計第三版DOM部分時，瞭解到要擷取某個元素在頁面上的位移量，需要將這個元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，一直迴圈直至根項目。所以，要得到元素到文檔地區的座標位置，只需通過while迴圈不斷擷取offsetParent的offsetLeft/offsetTop直到offsetParent = null為止。

　　js代碼：

　　代碼如下:

　　// 擷取元素到文檔地區的座標

　　function getPosition(element) {

　　var actualLeft = element.offsetLeft,

　　actualTop = element.offsetTop,

　　current = element.offsetParent; // 取得元素的offsetParent

　　// 一直迴圈直到根項目

　　while (current !== null) {

　　actualLeft += current.offsetLeft;

　　actualTop += current.offsetTop;

　　current = current.offsetParent;

　　}

　　// 返回包含left、top座標的對象

　　return {

　　left: actualLeft,

　　top: actualTop

　　};

　　}

　　例子：

　　firebug下測試結果：(註：其他瀏覽器已通過測試!)

　　二：通過 getBoundingClientRect() 方法實現

　　getBoundingClientRect方法用於獲得頁面中某個元素的左，上，右和下分別相對瀏覽器視窗window的位置。返回的是一個對象，該對象有四個屬性：top，left，right，bottom;該方法原本是IE Only的，但是FF3.0+和Opera9.5+已經支援了該方法，可以說在獲得頁面元素位置上效率有很大的提高。 另外，該方法避免使用while迴圈，而是直接擷取數值來實現，比第一種方法效能要好，特別是在複雜的頁面上更為明顯。

　　js代碼：

　　代碼如下:

　　// 擷取元素到文檔地區的座標

　　function getPosition(element){

　　var dc = document,

　　rec = element.getBoundingClientRect(),

　　_x = rec.left, // 擷取元素相對瀏覽器視窗window的左、上座標

　　_y = rec.top;

　　// 與html或body元素的滾動距離相加就是元素相對於文檔地區document的座標位置

　　_x += dc.documentElement.scrollLeft || dc.body.scrollLeft;

　　_y += dc.documentElement.scrollTop || dc.body.scrollTop;

　　return {

　　left: _x,

　　top: _y

　　};

　　}

　　經測試，該方法與第一種方法擷取元素相對於document的座標大小相同，對於IE低版本瀏覽器，存在一些差異。

　　注意：記得要累加上html(IE除外)或body(針對IE)元素的水平或垂直滾動距離!

　　結語：上文已對如何擷取元素相對於文檔地區document的座標位置做出了闡述，如遇到相關問題，可聯絡本人或直接發表評論，另外，對於右座標right以及下座標bottom的擷取只需把left、top座標的大小和元素本身的寬度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，當然offsetWidth、offsetHeight屬性會計算元素的內邊距、邊框，所以最好的辦法還是通過getBoundingClientRect方法來擷取。ps：補充一點，利用該方法返回對象的right-left = 元素寬度;bottom-top = 元素高度。可以擷取不帶邊框的元素本身的寬度和高度。