首页 > web前端 > jquery对象的position和offset方法理解

jquery对象的position和offset方法理解

2011年12月9日 发表评论 阅读评论

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的



欢迎转载,转载请注明文章出处,谢谢!
垃圾有点差凑合看还不错很精彩 (1 人打了份: 平均分:5.00)
Loading...Loading...
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.

无觅相关文章插件,快速提升流量