|
|
//取得元素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ā)覺這兩個函數有問題，并沒有把它們運用到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返回的是一個集合，分別為元素在瀏覽器可視區(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、標準模式，沒有重設html的border
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
2、標準模式，重設html的border
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
3、怪癖模式，沒有重設html的border
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
4、怪癖模式，重設html的border
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
John Resig給出的方案就是用clientTop，clientLeft作減值。以下函數就是從JQuery中摳出來，就后就用它獲取頁面元素的坐標，比offset大法安全多了。
復制代碼 代碼如下:
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
JavaScript技術：javascript 精確獲取頁面元素的位置，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
