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

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


獲取第一個元素的當前坐標，或設置匹配元素集中每個元素相對於文檔的坐標。

用法一

.offset() => Object

說明：獲取匹配元素集中第一個元素相對於文檔的當前坐標。

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

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

.offset() 方法允許我們檢索元素的當前位置(特別是它的邊框，不包括邊距)relative to the document。將此與 .position() 進行對比，後者檢索當前位置 relative to the offset parent 。當將新元素放置在現有元素之上以進行全局操作(特別是實現drag-and-drop)時，.offset() 更有用。

.offset() 返回一個包含屬性 top 和 left 的對象。

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

雖然可以通過設置visibility:hidden 獲取元素的坐標，但display:none 被排除在渲染樹之外，因此具有未定義的位置。

其他注意事項：

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

例子：

訪問第二段的偏移量：

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

演示：

點擊查看偏移量。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
    color: blue;
    width: 200px;
    cursor: pointer;
  }
  span {
    color: red;
    cursor: pointer;
  }
  div.abs {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 220px;
    top: 35px;
    background-color: green;
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<div id="result">Click an element.</div>
<p>
  This is the best way to <span>find</span> an offset.
</p>
<div class="abs">
</div>
 
<script>
$( "*", document.body ).click(function( event ) {
  var offset = $( this ).offset();
  event.stopPropagation();
  $( "#result" ).text( this.tagName +
    " coords ( " + offset.left + ", " + offset.top + " )" );
});
</script>
 
</body>
</html>

演示：

用法二

.offset( coordinates ) => jQuery

說明：設置匹配元素集中每個元素相對於文檔的當前坐標。

  • 添加的版本：1.4.offset( coordinates )

    • coordinates
      類型：PlainObject
      包含屬性 top 和 left 的對象，它們是表示元素的新頂部和左側坐標的數字。

  • 添加的版本：1.4.offset( function )

    • function
      類型：Function(Integer 索引，PlainObject 坐標)=> PlainObject
      返回要設置的坐標的函數。接收集合中元素的索引作為第一個參數，接收當前坐標作為第二個參數。該函數應返回具有新的top 和left 屬性的對象。

.offset() setter 方法允許我們重新定位元素。指定元素的 border-box 位置 relative to the document 。如果元素的 position 樣式屬性當前為 static ，它將被設置為 relative 以允許重新定位。

例子：

設置第二段的偏移量：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>offset demo</title>
  <style>
  p {
    margin-left: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
$( "p" ).last().offset({ top: 10, left: 30 });
</script>
 
</body>
</html>

演示：

相關用法


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