<tbody id="86a2i"></tbody>


<dd id="86a2i"></dd>
<progress id="86a2i"><track id="86a2i"></track></progress>

<dd id="86a2i"></dd>
<em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

    <dd id="86a2i"></dd>

    一、概念

    絕對位置:網頁元素的左上角相對于整張網頁左上角的坐標

    相對位置:相對于瀏覽器窗口左上角的坐標

    二、獲取方法

    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

    相關文章:

    免费一级a片在线播放视频|亚洲娇小性XXXX色|曰本无码毛片道毛片视频清|亚洲一级a片视频免费观看
    <tbody id="86a2i"></tbody>

    
    
    <dd id="86a2i"></dd>
    <progress id="86a2i"><track id="86a2i"></track></progress>

    <dd id="86a2i"></dd>
    <em id="86a2i"><ruby id="86a2i"><u id="86a2i"></u></ruby></em>

      <dd id="86a2i"></dd>