jQuery position() 方法

jQuery 中的 position() 方法用於返回元素相對於其偏移父元素的當前位置。

偏移父元素 是最近的已定位祖先元素。此方法返回一個物件，其中包含兩個屬性（所選元素的屬性）：以畫素為單位的頂部和左側位置。

語法

以下是 jQuery 中 position() 方法的語法：

$(selector).position()

引數

此方法不接受任何引數。

示例 1

在下面的示例中，我們使用 position() 方法返回“段落”元素的頂部和左側位置：

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var pos = $("p").position();
                alert("Top: " + pos.top + ", Left: " + pos.left);
            });
        });
    </script>
</head>
<body>
    <p>Click the button below to fetch the position (top and left)</p>
    <button>Get Position</button>
</body>
</html>

單擊按鈕時，它將返回“段落”元素的頂部和左側位置。

示例 2

在這裡，我們使用 position() 方法獲取“div”元素內 <div> 元素的位置：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
      $(document).ready(function() {
          $("button").click(function() {
              var pos = $("#inner").position();
              $("p").text("Top: " + pos.top + ", Left: " + pos.left);
          });
      });
  </script>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        #inner {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="inner"></div>
    </div>
    <button>Get Position</button>
    <p></p>
</body>
</html>

當我們點選“獲取位置”按鈕時，它會給出內部“div”元素相對於其父“div”元素的左側和頂部位置。

jquery_ref_html.htm

列印頁面