发新话题
打印

jQuery offset()和position()区别

jQuery offset()和position()区别

在 jQuery中有两个获取元素位置的方法offset()和position()。position()方法是在1.2.6版本之后加入的,为什么要引入 这个方法呢?这两个方法之间有什么异同?使用的时候应该注意哪些问题?什么时候使用offset(),什么时候又使用position()呢? 
先看看API对这这两个方法的定义:
offset():
获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性:top 和 left。此方法只对可见元素有效。
position():
获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性:top 和 left。为精确计算结果,请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
真的就这么简单吗?实践出真知。
先来看看在jQuery框架源码里面,是怎么获得position()的:
//Get *real* offsetParent
var offsetParent = this.offsetParent(),
//Get correct offsets
offset = this.offset(),
parentOffset = /^body|html$/i.test(offsetParent[0].tagName) ?
{ top: 0, left: 0 } : offsetParent.offset();
//Subtract element margins
//note: when an element has margin: auto the offsetLeft and marginLeft
//are the same in Safari causing offset.left to incorrectly be 0
offset.top-= num( this, marginTop);
offset.left -= num( this, marginLeft );
//Add offsetParent borders
parentOffset.top+= num( offsetParent, borderTopWidth);
parentOffset.left += num( offsetParent, borderLeftWidth );
//Subtract the two offsets
results = {
top: offset.top- parentOffset.top,
left: offset.left - parentOffset.left
};
 注意最后那段 代码:
results = {
top: offset.top- parentOffset.top,
left: offset.left - parentOffset.left
};
代码的意思就是获取本身元素距离它的父元素的距离。

TOP

发新话题