jquery對象的position和offset方法理解

jquery提供了兩個方法來獲取頁面的位置信息,offset方法能夠得到元素的絕對位置,position方法是取原始的相對信息,方法返回是一個map對象,key分別是left和top。例如,$(‘#test’).offset().left 得到是id爲test的元素距頁面左邊的像素。

何爲絕對位置,何爲相對位置呢?不管相對還是絕對,都有一個參照點,對於絕對位置比較簡單,它的參照點永遠是頁面的左上角(注意:body默認是margin值的,如果沒有手工修改此值,參照點不是正左上角,會有幾個像素的偏移);相對位置的參照點就比較麻煩,很多地方都說相對父元素左上角,那究竟哪個算父元素呢?這個父元素並不一定是該元素的直接父元素,有可能是父元素的父元素,甚至可能的參考點是頁面的左上角,父元素的定義是它的所有上層元素中第一個(距離本元素最近)css style中設置了position屬性的元素,如果所有上級元素都沒有設置該屬性,那麼參照點就是頁面的左上角,跟offset一致了。

例如代碼:

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;position: relative;border:1px solid;">
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

這時id爲test的div的相對位置的參照點就是他直接父元素,所以得到的left,top都爲10,而下面的代碼

<div style="padding: 10px;border:1px solid; position: relative;width:180px;">
	<div style="padding: 10px;border:1px solid;"><!-- 注意沒有設置position -->
		<div id="test" style="background-color: #000;width: 20px;height: 20px;"></div>
	</div>
</div>

此時參照點就是最外層的div,因此left、top的值爲21px,即10 + 1 + 10,10是padding,1是border的


原文鏈接地址:http://www.netingcn.com/jqueryposition-offset.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章