快捷導(dǎo)航

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

更新時間：2010年01月02日 12:58:45 作者：

現(xiàn)在網(wǎng)上最流行方法是John Resig在《Pro JavaScript techniques》提出的offset大法，累加元素offsetParent的offsetLeft和offsetTop一直到DOM的頂層。

 
//取得元素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; 
} 

貌似這位大神在出這本書時比較趕，有許多紕漏，最后大神也發(fā)覺這兩個函數(shù)有問題，并沒有把它們運用到JQuery中。由于是用累加的方式去計算，只要一個元素出現(xiàn)問題，就有可能層層被大，因此我在精確獲取樣式屬性時就摒棄這種方法。主要誤算參照大神的結(jié)論：
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返回的是一個集合，分別為元素在瀏覽器可視區(qū)的四個角的坐標。

不過它在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、標準模式，沒有重設(shè)html的border

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

2、標準模式，重設(shè)html的border

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

3、怪癖模式，沒有重設(shè)html的border

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

4、怪癖模式，重設(shè)html的border

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

John Resig給出的方案就是用clientTop，clientLeft作減值。以下函數(shù)就是從JQuery中摳出來，就后就用它獲取頁面元素的坐標，比offset大法安全多了。

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

 
var getCoords = function(el){ 
var box = el.getBoundingClientRect(), 
doc = el.ownerDocument, 
body = doc.body, 
html = doc.documentElement, 
clientTop = html.clientTop || body.clientTop || 0, 
clientLeft = html.clientLeft || body.clientLeft || 0, 
top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop, 
left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft 
return { 'top': top, 'left': left }; 
}; 

其中self.pageYOffset相當于window.self.pageYOffset，是火狐的一個屬性，相當于document.body.scrollTop。以下是它的定義：
Definition: The pageYOffset property is used to determine the Y coordinate of the scroll position in some browsers. This is not a reserved word so you can declare your own variable or function called pageYOffset but if you do then you will not be able to find or alter the scroll position of a window in some browsers

您可能感興趣的文章: