.offset() | jQuery API Documentation

相关文章推荐

爱玩的茄子 · 俄罗斯人是怎么看待《尼布楚条约》的？_手机搜狐网· 8 月前 ·

礼貌的领带 · 芜湖市高中毕业证_客户案例_合肥做证件_芜湖 ...· 1 年前 ·

呐喊的乌冬面 · 鲁菜的历史进化论_手机新浪网· 1 年前 ·

英俊的作业本 · 《百年孤独》最震撼人心的15句话，句句都是人 ...· 1 年前 ·

俊秀的小刀 · mx350显卡怎么样mx350显卡相当于什么 ...· 1 年前 ·

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

The .offset() method allows us to retrieve the current position of an element (specifically its border box, which excludes margins) relative to the document . Contrast this with .position() , which retrieves the current position relative to the offset parent . When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is more useful.

.offset() returns an object containing the properties top and left .

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for margins set on the <html> document element.

While it is possible to get the coordinates of elements with set, is excluded from the rendering tree and thus has a position that is undefined.

Additional Notes:


     .offset()

Examples:

Access the offset of the second paragraph:

<!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.6.3.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.6.3.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>

The .offset() setter method allows us to reposition an element. The element's border-box position is specified relative to the document . If the element's position style property is currently static , it will be set to relative to allow for this repositioning.

Example:

Set the offset of the second paragraph:

<!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.6.3.js"></script>
</head>
<body>
 
<p>Hello</p><p>2nd Paragraph</p>
 
<script>
$( "p" ).last().offset({ top: 10, left: 30 });
</script>
 
</body>
</html>

Contents:

Additional Notes: