Jquery中的中的offset()和和position()深入剖析深入剖析
先看看这两个方法的定义。
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
};
点击下面的页面可以测试一下两个的区别：
body{margin:15px;width:960px;}
.parent{
border:3px solid #ccc;
width:600px;
height:300px;
margin-left:55px;
padding:25px;
}
.child{
background:#666;
width:200px;
height:200px;
color:#fff;
}
.copyright{
position:absolute;
right:0;
}
父容器的position是默认值，也就是static,子容器的position为默认值，也是static,这个时候，offset和position值相同
父容器的position是相对定位，也就是ralative,子容器的position为默认值，也是static,这个时候，offset和position值不同
父容器的position是绝对定位，也就是absolute,子容器的position为默认值，也是static,这个时候，offset和position值不同
©playgoogle.com
评论0
最新资源