博客

jquery–offset()方法

  • Post category:other

jQuery offset() 方法

jQuery offset() 方法用于获取或设置匹配元素相对于文档的偏移（位置）。

语法

$(selector).offset()

返回值

返回一个对象，包含两个整型属性：top 和 left。

示例1：获取元素的偏移位置

以下示例演示如何使用 offset() 方法获取元素的偏移位置：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery offset() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        $(document).ready(function(){
            var offset = $("#box").offset();
            console.log("top: " + offset.top + ", left: " + offset.left);
        });
    </script>
</body>
</html>

在上面的示例中，使用 offset() 方法获取 id 为 box 的元素的偏移位置，并将结果输出到控制台。

示例2：设置元的偏移位置

以下示例演示如何使用 offset() 方法设置元素的偏移位置：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery offset() 方法示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button id="move">移动</button>
    <script>
        $(document).ready(function(){
            $("#move").click(function(){
                $("#box").offset({top: 100, left: 100});
            });
        });
    </script>
</body>
</html>

在上面的示例中，使用 offset() 方法设置 id 为 box 的元素的偏移位置为 {top: 100, left: 100}，并在点击按钮时移动素。

总的来说，jQuery offset() 方法是一个非常有用的方法，可以用于获取或设置元素的偏移位置。通过上述攻略，可以轻松地使用 offset() 方法获取或设置元素的偏移位置。

Tags: