Javascript獲取頁(yè)面元素的絕對(duì)位置實(shí)現(xiàn)

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

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

一、概念

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

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

二、獲取方法

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

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

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

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

所以，只需要循環(huán)取得頁(yè)面元素的offsetParent，并逐步累加offsetTop和offsetLeft，就可以得到該元素的絕對(duì)坐標(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對(duì)象未必等于父容器（同樣的，還有表格），所以通過getElementAbsPos函數(shù)得到并不是頁(yè)面元素的絕對(duì)位置，如下圖所示：

下面給出一個(gè)在iframe中正確獲取頁(yè)面元素的絕對(duì)位置的代碼：

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

您可能感興趣的文章: