首頁 > 其他

js中offsetLeft,offsetTop,offsetParent詳解

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

為前端開發工程師，你確定真的理解offsetLeft,offsetTop以及offsetParent嗎,今天小編在這裡給大家詳細說說這三個js的特性，當然前兩個其特性是一樣的，在這裡我就只拿offsetLeft的說明。

1.offsetLeft/offsetTop

在頁面任一元素的offsetLeft總是找到離其最近的已經定位的元素定位，如果沒有，就根據根節點body定位，然後擷取其left值例如

 代碼如下 複製代碼

<div id=”div2″>
<div id=”div3″>
<div id=”div4″></div>
</div>
</div>

css:
#div2{width:400px;height:400px;background:#0f0;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

div4的offsetLeft根據body定位：10+10+10=30

如果我們將css做如下改變

 代碼如下 複製代碼

css:
#div2{width:400px;height:400px;background:#0f0;position:relative;margin-left:10px}
#div3{width:300px;height:300px;background:#00f;margin-left:10px}
#div4{width:200px;height:200px;background:#000;margin-left:10px;}

div4的offsetLeft根據div2定位：10+10=20

offsetTop同理

2.offsetParent

其實offsetParent，返回一個元素離其最近的已經定位的元素，如果沒有就返回body,其概念和offsetLeft差不多

3.執行個體：封裝一個函數獲得任一元素在頁面的位置

 代碼如下 複製代碼

var GetPosition= function (obj)
{
var left = 0;
var top = 0;
while(obj.offsetParent)//如果obj的有最近的父級定位元素就繼續
{
left += obj.offsetLeft;//累加
top += obj.offsetTop;
obj=obj.offsetParent;//更新obj,繼續判斷新的obj是否還有父級定位，然後繼續累加
}
return {“left”:left,”top”:top}//返回json格式
}

 IE6,IE7 對offsetParent解釋有個小BUG，當祖先元素都不是定位元素且本身是定位元素的時候返回document.documentElement，其他情況終返回document.body!!

 代碼如下 複製代碼

<body>
    <div id="b" style="position:relative">
        <div id="a"></div>
    </div>

 

    <div id="d">
        <div id="c"></div>
    </div>

 

    <div id="f">
        <div id="e" style="position:relative"></div>
    </div>
</body>
 

a.offsetParent >> b

c.offsetParent >> document.body

e.offsetParent >> document.body  ( ie,6,7 >> document.documentElement )
 

按照這樣理解可以推斷elemnt.offsetParent本身在擷取的時候要通過頁面不斷尋找父元素，直到找到最近的定位元素或者document.body，在代碼多層嵌套的時候，需要向上尋找未知的層次。效率可見一斑~ 尤其是在某些瀏覽器下計算頁面元素位置的時候引用elemnt.offsetParent element.offsetLeft element.offsetTop 三者進行迴圈計算的時候效率很低。

 elemnt.offsetLeft elemnt.offsetTop

 Summary: 返回相對elemnt.offsetParent的位置

 PS：IE8,IE9 Preview,Opera 和個別狀況下的IE6,IE7返回的值包括elemnt.offsetParent的borderLeftWidth和borderTopWidth

 代碼如下 複製代碼

<style type="text/css">
#b{position:relative; background:#E3EBF4; width:300px; height:300px; border:20px solid #628DC0 }
#a{position:absolute; background:#9E9E9E; width:100px; height:100px; left:100px; top:100px;}
</style>

 <div id="b">
<div id="a"></div>
</div>
 


document.getElementByIdx('a').offsetLeft >> 100

document.getElementByIdx('a').offsetTop >> 100


上面是正確的值，而在IE8和Opera裡面均返回 120，如果對b的CSS做一些修改，如下：

 #b{position:relative; background:#E3EBF4; border:20px solid #628DC0 } 去掉width 和height，

 那麼在ie6,7裡面返回也出現了問題

 ie6:

document.getElementByIdx('a').offsetLeft >> 120

document.getElementByIdx('a').offsetTop  >> 100

 ie7:

document.getElementByIdx('a').offsetLeft >> 120

document.getElementByIdx('a').offsetTop  >> 120

 所以在IE8,Opera 以及特殊情況的IE6 IE7裡面 如果通過elemnt.offsetParent element.offsetLeft element.offsetTop計算頁面元素位置需要在每一次迴圈中減去borderLeftWidth和borderTopWidth 的值。當然目前來說除了Opera 9.2 以外均不需要考慮這種情況，因為其他Browser或者更高版本都支援 getBoundingClientRect()來計算擷取頁面元素位置。關於getBoundingClientRect() 來這裡！

 上面的Demo在正常情況下絕大多數時候offsetLeft,offsetTop和left,top的值是相等的，但當a同時具有marging屬性的時候offsetLeft,offsetTop均是包含marging值的，所以在類比獲得left top值的時候需要稍加註意！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More