有時候,我們使用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").