Javascript獲取頁面元素的絕對位置實現(xiàn)

更新時間：2022年11月16日 15:59:57 作者：sunlylorn

這篇文章主要為大家介紹了Javascript獲取頁面元素的絕對位置實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

一、概念

絕對位置：網(wǎng)頁元素的左上角相對于整張網(wǎng)頁左上角的坐標(biāo)

相對位置：相對于瀏覽器窗口左上角的坐標(biāo)

二、獲取方法

1、每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。

2、每個元素都有offsetParent屬性。offsetParent屬性返回一個對象的引用，這個對象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進(jìn)行過CSS定位的容器元素。如果這個容器元素未進(jìn)行CSS定位, 則offsetParent屬性的取值為根元素(在標(biāo)準(zhǔn)兼容模式下為html元素；在怪異呈現(xiàn)模式下為body元素)的引用。

當(dāng)容器元素的style.display 被設(shè)置為 "none"時（譯

注：IE和Opera除外），offsetParent屬性返回 null 。

所以，只需要循環(huán)取得頁面元素的offsetParent，并逐步累加offsetTop和offsetLeft，就可以得到該元素的絕對坐標(biāo)。

三、代碼

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函數(shù)得到并不是頁面元素的絕對位置，如下圖所示：

下面給出一個在iframe中正確獲取頁面元素的絕對位置的代碼：

/**
 * @param e 頁面元素
 * @param arrParentid 頁面元素e所在的iframe的數(shù)組
 * @param isID 參數(shù)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獲取頁面元素的絕對位置實現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Javascript元素絕對位置的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: