隨時隨地取得物件座標

Mon, 29 May 2006 11:42:15 +0800

網頁上的東西都沒有座標，所以在用absolute positioning的時候也很麻煩。所以寫了一個小函數來取得任何可以定位的物件的座標。

程式如下，為了簡單，left跟top分開來做，但是方法一樣。try/catch是自己拿來debug用的。

function realPosX (oTarget) {
try {
var realX = oTarget.offsetLeft
if (oTarget.offsetParent.tagName.toUpperCase() != "BODY") {
realX += realPosX(oTarget.offsetParent); 
}
return realX;
} catch (e) {
alert("realPosX: "+e);
} 
}
function realPosY (oTarget) {
try {
var realY = oTarget.offsetTop;
if (oTarget.offsetParent.tagName.toUpperCase() != "BODY") {
realY += realPosY(oTarget.offsetParent);
}
return realY;
} catch (e) { 
alert("realPosY: "+e);
}
}

用了遞迴的方式，一層一層向上在DOM中探索父物件直到碰到document.body為止。為了用遞迴，而在DOM中並不是所有物件都有id，所以傳進來的參數一定要是物件的reference。

用了offsetParent而不是parentNode，因為並不是所有父物件都可以定位。這個函數應該在IE跟Firefox都可以用。

[2007/10/5]
（稍微修改一下讓顯示比較美觀:D，另外判斷遞迴是否到達body tag時為了嚴謹，加上toUpperCase。）