當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .position()用法及代碼示例


用法 
.position() => Object

說明：獲取匹配元素集合中第一個元素相對於偏移父元素的當前坐標。

  • 添加的版本：1.2.position()

    • 此方法不接受任何參數。

.position() 方法允許我們檢索元素的當前位置(特別是它的邊距框)relative to the offset parent(特別是它的填充框，不包括邊距和邊框)。將此與 .offset() 進行對比，後者檢索當前位置 relative to the document 。當將新元素放置在另一個元素附近並在同一個包含 DOM 元素內時，.position() 更有用。

返回包含屬性 top 和 left 的對象。

注意：jQuery 不支持獲取隱藏元素的位置坐標或考慮在<html>文檔元素。

其他注意事項：

  • dimensions-related API(包括 .position() )返回的數字在某些情況下可能是小數。代碼不應假定它是整數。此外，當用戶縮放頁麵時，尺寸可能不正確；瀏覽器不會公開 API 來檢測這種情況。

例子：

訪問第二段的位置：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
  div {
    padding: 15px;
  }
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .position()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。