首頁 > 開發者 > JavaScript
Jquery中offset()和position()的區別分析，jqueryoffset
本文執行個體分析了Jquery中offset()和position()的區別。分享給大家供大家參考。具體分析如下：
一、Jquery中offset()
擷取匹配元素在當前視口的相對位移。 總是計算相對於文檔的位置，無論元素的父元素或祖先元素的position屬性是什麼。
返回的對象包含兩個整形屬性：top 和 left。此方法只對可見元素有效。
例如：
<!DOCTYPE html> <html> <head> <style> p { margin-left:10px; } </style> <script src="js/jquery.js"></script> </head> <body> <p>Hello</p><p>2nd Paragraph</p> <script>var p = $("p:last"); var offset = p.offset(); p.html( "left: " + offset.left + ", top: " + offset.top );</script> </body> </html>
二、Jquery中position()
擷取匹配元素相對父元素的位移。 更通俗一點，含有position:relative的元素的最近的父元素或祖先元素---的位置。如果未能找到這樣的父元素或祖先元素，那麼會計算相對於文檔（即視區左上方）的位置. 返回的對象包含兩個整形屬性：top 和 left。為精確計算結果，請在補白、邊框和填充屬性上使用像素單位。
例如：
<!DOCTYPE html> <html> <head> <style> div { padding: 15px;} p { margin-left:10px; } </style> <script src="jquery指令碼URL"></script> </head> <body> <div> <p>Hello</p> </div> <p></p> <script> var p = $("p:first"); var position = p.position(); $("p:last").text( "left: " + position.left + ", top: " + position.top ); </script> </body> </html>
三、offset()和position()的區別
1、offset()方法擷取匹配元素在當前視窗的相對位移量。這裡的視窗指的是當前頁面的視窗，不包括瀏覽器的功能表列等，當然我們也不太需要使用jquery來控制整個瀏覽器，我們所要控制的是頁面視窗。
2、position()方法擷取匹配元素相對父元素的位移量。即擷取的是該元素相對於最近的一個擁有絕對位置或者相對定位的父元素的位移量。如果所有的父元素都是預設的static定位方式，則其處理方式和offset()一樣，是當前視窗的位移量。
3、使用position()方法時如果其所有的父元素都為預設定位（static）方式，則其處理方式和offset()一樣，是當前視窗的相對位移
4、使用offset()方法不管該元素如何定位，也不管其父元素如何定位，都是擷取的該元素相對於當前視口的位移。
5、一般情況下，如果要顯示的元素B存放在元素A的同一父元素下（即B為A的兄弟節點），這個時候使用position() 是最合適的；如果顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）。這個時候用offset()是最好的。
希望本文所述對大家的jQuery程式設計有所協助。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
