jquery中offset和position的區別

時間  2021-08-14
標籤 html jquery ide spa code xml htm 對象 欄目 JQuery 简体版
原文   原文鏈接
jQuery中有兩個獲取元素位置的方法offset()和position()，二者的定義以下:
 
offset():
獲取匹配元素在當前視口的相對偏移。
返回的對象包含兩個×××屬性：top 和 left。此方法只對可見元素有效。
用法舉例：offset() 
<!DOCTYPE html> 
<html> 
<head> 
  <style> 
p { margin-left:10px; } 
  </style> 
  <script src="http://code.jquery.com/jquery-latest.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>
第二種用法：offset( coordinates )





讓咱們從新設置元素的位置這個元素的位置是相對於document對象的。
若是對象原先的position樣式屬性是static的話，會被改爲relative來實現重定位。
<!DOCTYPE html> 
<html> 
<head> 
  <style>p { margin-left:10px; } </style> 
  <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 
  <p>Hello</p><p>2nd Paragraph</p> 
<script>$("p:last").offset({ top: 10, left: 30 });</script> 
 
</body> 
</html>
position():
獲取匹配元素相對父元素的偏移。
返回的對象包含兩個×××屬性：top 和 left。爲精確計算結果，
請在補白、邊框和填充屬性上使用像素單位。此方法只對可見元素有效。
用法舉例：
<!DOCTYPE html>  
 <html>  
 <head>  
  <style>  
 
  div { padding : 15px ;}  
  p { margin - left : 10px ; }  
  </style>  
  <script src = "http://code.jquery.com/jquery-latest.js" ></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. 使用position()方法時事實上是把該元素當絕對定位來處理，獲取的是該元素至關於最近的一個擁有絕對或者相對定位的父元素的偏移位置。
  2. 使用position()方法時若是其全部的父元素都爲默認定位（static）方式，則其處理方式和offset()同樣，是當前窗口的相對偏移
  3. 使用offset()方法無論該元素如何定位，也無論其父元素如何定位，都是獲取的該元素相對於當前視口的偏移。
通常狀況下，若是要顯示的元素B存放在元素A的同一父元素下（即B爲A的兄弟節點），這個時候使用position() 是最合適的；
若是顯示的元素B存放在DOM的最頂端或者最底端（即其父元素就是body）。這個時候用offset()是最好的。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程