快捷導(dǎo)航

js獲取元素到文檔區(qū)域document的(橫向、縱向)坐標(biāo)的兩種方法

更新時(shí)間：2013年05月17日 17:55:10 作者：

獲取頁(yè)面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo)，在js控制元素運(yùn)動(dòng)的過(guò)程中，對(duì)于頁(yè)面元素坐標(biāo)位置的獲取是經(jīng)常用到的，這里主要總結(jié)下兩種方法

獲取頁(yè)面中元素到文檔區(qū)域document的橫向、縱向坐標(biāo)的兩種方法及其比較
在js控制元素運(yùn)動(dòng)的過(guò)程中，對(duì)于頁(yè)面元素坐標(biāo)位置的獲取是經(jīng)常用到的，這里主要總結(jié)下兩種方法：

一：通過(guò)疊加元素對(duì)象和它的offsetParent(如果存在)的offsetLeft/offsetTop屬性來(lái)實(shí)現(xiàn)
在閱讀javascript高級(jí)程序設(shè)計(jì)第三版DOM部分時(shí)，了解到要獲取某個(gè)元素在頁(yè)面上的偏移量，需要將這個(gè)元素的offsetLeft和offsetTop與其offsetParent的相同屬性相加，一直循環(huán)直至根元素。所以，要得到元素到文檔區(qū)域的坐標(biāo)位置，只需通過(guò)while循環(huán)不斷獲取offsetParent的offsetLeft/offsetTop直到offsetParent = null為止。
js代碼：

復(fù)制代碼代碼如下:

 
// 獲取元素到文檔區(qū)域的坐標(biāo) 
function getPosition(element) { 
var actualLeft = element.offsetLeft, 
actualTop = element.offsetTop, 
current = element.offsetParent; // 取得元素的offsetParent 
// 一直循環(huán)直到根元素 
while (current !== null) { 
actualLeft += current.offsetLeft; 
actualTop += current.offsetTop; 
current = current.offsetParent; 
} 
// 返回包含left、top坐標(biāo)的對(duì)象 
return { 
left: actualLeft, 
top: actualTop 
}; 
} 

例子截圖：

firebug下測(cè)試結(jié)果截圖：(注：其他瀏覽器已通過(guò)測(cè)試！)

二：通過(guò) getBoundingClientRect() 方法實(shí)現(xiàn)
getBoundingClientRect方法用于獲得頁(yè)面中某個(gè)元素的左，上，右和下分別相對(duì)瀏覽器視窗window的位置。返回的是一個(gè)對(duì)象，該對(duì)象有四個(gè)屬性：top，left，right，bottom；該方法原本是IE Only的，但是FF3.0+和Opera9.5+已經(jīng)支持了該方法，可以說(shuō)在獲得頁(yè)面元素位置上效率有很大的提高。另外，該方法避免使用while循環(huán)，而是直接獲取數(shù)值來(lái)實(shí)現(xiàn)，比第一種方法性能要好，特別是在復(fù)雜的頁(yè)面上更為明顯。
js代碼：

復(fù)制代碼代碼如下:

 
// 獲取元素到文檔區(qū)域的坐標(biāo) 
function getPosition(element){ 
var dc = document, 
rec = element.getBoundingClientRect(), 
_x = rec.left, // 獲取元素相對(duì)瀏覽器視窗window的左、上坐標(biāo) 
_y = rec.top; 
// 與html或body元素的滾動(dòng)距離相加就是元素相對(duì)于文檔區(qū)域document的坐標(biāo)位置 
_x += dc.documentElement.scrollLeft || dc.body.scrollLeft; 
_y += dc.documentElement.scrollTop || dc.body.scrollTop; 
return { 
left: _x, 
top: _y 
}; 
} 

經(jīng)測(cè)試，該方法與第一種方法獲取元素相對(duì)于document的坐標(biāo)大小相同，對(duì)于IE低版本瀏覽器，存在一些差異。

注意：記得要累加上html(IE除外)或body(針對(duì)IE)元素的水平或垂直滾動(dòng)距離！
結(jié)語(yǔ)：上文已對(duì)如何獲取元素相對(duì)于文檔區(qū)域document的坐標(biāo)位置做出了闡述，如遇到相關(guān)問(wèn)題，可聯(lián)系本人或直接發(fā)表評(píng)論，另外，對(duì)于右坐標(biāo)right以及下坐標(biāo)bottom的獲取只需把left、top坐標(biāo)的大小和元素本身的寬度(elem.offsetWidth)以及高度(elem.offsetHeight)相加即可，當(dāng)然offsetWidth、offsetHeight屬性會(huì)計(jì)算元素的內(nèi)邊距、邊框，所以最好的辦法還是通過(guò)getBoundingClientRect方法來(lái)獲取。ps：補(bǔ)充一點(diǎn)，利用該方法返回對(duì)象的right-left = 元素寬度；bottom-top = 元素高度?？梢垣@取不帶邊框的元素本身的寬度和高度。

您可能感興趣的文章: