2010年9月15日

Jquery中的offset()和position()方法详解

再给普加地图添加搜索提示的时候，我使用了jQuery的offset方法，因为习惯了，结果出现了不对齐的bug，说明offset的方法获取的top和left值是错误的。后来想起了jQuery中offset和position的两个方法有所不同，就查了一下google，原来两者是在父节点的相对绝对定位相关的。于是整理了今天的文章。

我们首先来看看这两个方法的定义。

jQuery的offset()方法

获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

jQuery的position()方法

获取匹配元素相对父元素的偏移。
返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

深入剖析jQuery的源代码

先来看看在jquery框架源码里面，是怎么获得offset()和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
};

点击下面的链接可以测试一下两个的区别

jQuery的offset()和position()方法差异性测试