一、概念
絕對位置:網頁元素的左上角相對于整張網頁左上角的坐標
相對位置:相對于瀏覽器窗口左上角的坐標
二、獲取方法
1、每個元素都有offsetTop和offsetLeft屬性,表示該元素的左上角與父容器(offsetParent對象)左上角的距離。
2、每個元素都有offsetParent屬性。offsetParent屬性返回一個對象的引用,這個對象是距離調用offsetParent的元素最近的(在包含層次中最靠近的),并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準兼容模式下為html元素;在怪異呈現模式下為body元素)的引用。
當容器元素的style.display 被設置為 "none"時(譯
注:IE和Opera除外),offsetParent屬性 返回 null 。
所以,只需要循環取得頁面元素的offsetParent,并逐步累加offsetTop和offsetLeft,就可以得到該元素的絕對坐標。
三、代碼
function getElementAbsPos(e) { var t = e.offsetTop; var l = e.offsetLeft; while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } return {left:l,top:t}; }
四、問題
由于在iframe中,offsetParent對象未必等于父容器(同樣的,還有表格),所以通過getElementAbsPos函數得到并不是頁面元素的絕對位置,如下圖所示:
下面給出一個在iframe中正確獲取頁面元素的絕對位置的代碼:
/** * @param e 頁面元素 * @param arrParentid 頁面元素e所在的iframe的數組 * @param isID 參數arrParentid中是iframe的id還是object */ function getElementAbsPos(e,arrParentid,isID) { var t = e.offsetTop; var l = e.offsetLeft; while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } if(arguments.length >= 2) { for(var i=0; i<arrParentid.length; i++) { e = (isID==true) ? top.document.getElementById(arrParentid[i]) : arrParentid[i]; t += e.offsetTop; l += e.offsetLeft; while(e = e.offsetParent) { t += e.offsetTop; l += e.offsetLeft; } } } return {left:l,top:t}; }
以上就是Javascript獲取頁面元素的絕對位置實現的詳細內容,更多關于Javascript元素絕對位置的資料請關注其它相關文章!
原文地址:https://blog.csdn.net/sunlylorn/article/details/6673416