jQuery position()和offset()的區別用法及代碼示例

jQueryUI 方法都返回包含頂部和左側位置的整數坐標屬性的對象。頂部和左側坐標的位置以像素為單位返回。這兩個函數僅適用於可見元素，不適用於隱藏元素。

例子：該示例給出了包含文本的框的頂部和左側坐標。


<!DOCTYPE html>
<html>
<head>
    <title>The difference between 
      offset and position Method</title>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <!-- jQuery code to show the method -->
    <script>
        /* code for position */
        $(document).ready(function() {
            $("#position").click(function() {
                var Geek = $("#testDiv").position();
                alert("Top : " + Geek.top +
                    " Left : " + Geek.left);
            });
            /* code for offset */
            $("#offset").click(function() {
                var Geek = $("#testDiv").offset();
                alert("Top : " + Geek.top +
                    " Left : " + Geek.left);
            });
        });
    </script>
    <style>
        #container {
            width: 40%;
            min-height: 100px;
            padding: 20px;
            font-size: 25px;
            border: 2px solid green;
            font-weight: bold;
            color: green;
            background: gray;
            position: relative;
        }
        #testDiv {
            background: silver;
        }
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <b>offset() and position()</b>
        <div>
            <div id="container">
                <div id="testDiv">
                  Welcome to GeeksforGeeks
                </div> 
            </div>
            <div style="height:10px"></div>
            <button id="offset">click for offset</button> 
            <button id ="position">
                  click for position
            </button> 
        </div>
    </center>
</body> 
</html>

輸出：

在單擊任何按鈕之前：
單擊按鈕後：

抵消：

位置：

offset()和position()方法的區別：

offset()方法	position()方法
jQuery 中的 offset() 方法返回 HTML 元素相對於文檔的第一個找到的位置。	jQuery 中的 position() 方法返回 HTML 元素相對於其父元素的偏移量的當前位置。
jQuery UI offset() 是相對於文檔的。	jQuery UI position() 是相對於父元素的。
當您想要將一個新元素放置在另一個已經存在的元素之上時，最好使用 jQuery offset() 方法。	當您想要將新元素放置在同一容器內的另一個 DOM 元素附近時，最好使用 jQuery position() 方法。
offset()方法主要用在drag-and-drop函數中。	position() 方法用於相對於文檔、窗口或其他元素(如鼠標或光標)定位元素。

相關用法

注：本文由純淨天空篩選整理自geetanjali16大神的英文原創作品 What is the difference between position() and offset() in jQuery ?。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。