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

2024-05-06 14:15:12

字體：大中小

供稿：網(wǎng)友

先看看這兩個方法的定義。
offset():
獲取匹配元素在當前視口的相對偏移。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
position():
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個整形屬性：top 和 left。為精確計算結(jié)果，請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
真的就這么簡單嗎？實踐出真知。
先來看看在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
};

點擊下面的頁面可以測試一下兩個的區(qū)別：
<!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需刷新才能執(zhí)行]
通過test1頁面測試的結(jié)果可以得出這個結(jié)論：
使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素相當于最近的一個擁有絕對或者相對定位的父元素的偏移位置。