您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

jQuery offset()和position()方法

时间:03-07来源:作者:点击数:

在 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>

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

offset()方法的效果
图 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>

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

position()方法的效果
图 2:position() 方法的效果

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

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门