2013年7月4日 星期四

[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").