Jquery中的offset()和position()深入剖析

2024-05-06 14:15:12

字体：大中小

来源：转载

供稿：网友

先看看这两个方法的定义。
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
};

点击下面的页面可以测试一下两个的区别：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>offset和position测试1</title> <style type="text/css"> 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; } </style> </head> <body> 父容器的position是默认值，也就是static,子容器的position为默认值，也是static,这个时候，offset和position值相同<br><br><br> <br> 父容器的position是相对定位，也就是ralative,子容器的position为默认值，也是static,这个时候，offset和position值不同 <br> 父容器的position是绝对定位，也就是absolute,子容器的position为默认值，也是static,这个时候，offset和position值不同 ©playgoogle.com </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
通过test1页面测试的结果可以得出这个结论：
使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。