首页 > 编程笔记 > JavaScript笔记 > jQuery DOM操作

jQuery offset()和position()方法

在 jQuery 中，很多时候我们需要获取元素的位置，再进行相应的操作。例如在新宝库的在线调色板工具中，就是根据元素的位置来确定颜色值的，如图 1 所示。

图 1：在线调色板

如何获取元素的位置？jQuery 为我们提供了两种方法：一种是 offset()，另一种是 position()。

jQuery offset()方法

在 jQuery 中，我们可以使用 offset() 方法来获取或设置元素相对于“当前文档（也就是浏览器窗口）”的偏移距离。

语法：

$().offset().top
$().offset().left

offset() 方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字：

top 属性，表示获取元素相对于当前文档“顶部”的距离；
left 属性，表示获取元素相对于当前文档“左部”的距离。

举例

复制纯文本复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body{text-align:center;}
        #box1,#box2
        {
            display:inline-block;
            height:100px;
            width:100px;
        }
        #box1{background-color:Red;}
        #box2{background-color:Orange;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var top = $("#box2").offset().top;
            var left = $("#box2").offset().left;
            var result = "box2距离顶部：" + top + "px\n" + "box2距离左部：" + left + "px";
            console.log(result);
        })
    </script>
</head>
<body>
    <div id="box1"></div><br />
    <div id="box2"></div><br />
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        body{text-align:center;}
        #box1,#box2
        {
            display:inline-block;
            height:100px;
            width:100px;
        }
        #box1{background-color:Red;}
        #box2{background-color:Orange;}
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var top = $("#box2").offset().top;
            var left = $("#box2").offset().left;
            var result = "box2距离顶部：" + top + "px\n" + "box2距离左部：" + left + "px";
            console.log(result);
        })
    </script>
</head>
<body>
    <div id="box1"></div><br />
    <div id="box2"></div><br />
</body>
</html>

控制台输出结果如图 1 所示。

图 1：offset() 方法的效果

特别注意一下，$().offset().top 和 $().offset().left 这两个方法返回的数值是不带单位的。

jQuery position()方法

在 jQuery 中，我们可以使用 position() 方法来获取或设置当前元素相对于“最近被定位的祖先元素”的偏移位置。

语法：

$().position().top
$().position().left

position() 方法返回的是一个坐标对象，该对象有两个属性，这两个属性返回的都是一个不带单位的数字：

top属性，表示获取元素相对于最近被定位的祖先元素“顶部”的距离；
left属性，表示获取元素相对于最近被定位的祖先元素“左部”的距离。

举例：

复制纯文本复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            position:relative;
            width:200px;
            height:200px;
            background-color:orange;
        }
        #son
        {
            position:absolute;
            top:20px;
            left:50px;
            width:50px;
            height:50px;
            background-color:red;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var top = $("#son").position().top;
            var left = $("#son").position().left;
            var result = "子元素相对父元素顶部的距离是：" + top + "px\n" + "子元素相对父元素左部的距离是：" + left + "px";
            console.log(result);        
        })
    </script>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #father
        {
            position:relative;
            width:200px;
            height:200px;
            background-color:orange;
        }
        #son
        {
            position:absolute;
            top:20px;
            left:50px;
            width:50px;
            height:50px;
            background-color:red;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            var top = $("#son").position().top;
            var left = $("#son").position().left;
            var result = "子元素相对父元素顶部的距离是：" + top + "px\n" + "子元素相对父元素左部的距离是：" + left + "px";
            console.log(result);        
        })
    </script>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>

控制台输出结果如图 2 所示。

图 2：position() 方法的效果

在实际开发中，获取元素的坐标是很常见的操作。大家一定要重点掌握 offset() 和 position() 这两个方法。

jQuery offset()和position()方法

jQuery offset()方法

jQuery position()方法

所有教程

优秀文章