[javascript] 偵測DOM元素絕對位置（absolute position）

有時候，我們使用Javascript輔助CSS設計網站版面配置的時候，希望動態的抓取某個DOM元件之絕對作標(以父原素左上角為原點)，這時候我們可以使用以下幾個方法來達到目的。

純Javascript

var getAbsPos = function(o) {
    var pos = {x:0, y:0};
    while (o!=null)
    {
    pos.x += o.offsetLeft;
    pos.y += o.offsetTop;
    o = o.offsetParent; //若區塊外還有父元素，就繼續往外推
    }
    return pos;
}
var POS = getAbsPos(element);
console.log("top: "+POS.y, "left: "+ POS.x);

使用jQuery

var POS = $(element).offset();
console.log("top: "+POS.top , "left: "+POS.left);

使用純Javascript，但卻希望像jQuery般操作

Element.prototype.offset = function(){
   var pos = {top:0,left:0}; 
   pos.left = pos.left + this.offsetLeft;
   pos.top =pos.top + this.offsetTop;return pos;
}
var POS = (element).offset();
console.log("top: "+POS.top , "left: "+POS.left);

Note:
element 為特定的DOM node.例如： document.getElementById("my_id").