博客

jQuery position()实例

  • Post category:jquery

当我们需要获取一个元素在页面中的位置信息时，可以使用 jQuery 的 position() 方法。该方法返回一个对象，包含了相对于 offsetParent 元素的左上角的坐标（即相对位置）。

语法

$(selector).position();

其中，selector 是要获取位置信息的元素的选择器字符串。

示例说明

以下是两个实例示例：

示例 1：

HTML 代码：

<div id="container">
  <div id="target">目标元素</div>
</div>

CSS 代码：

#container {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #f5f5f5;
}

#target {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #6495ed;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

jQuery 代码：

var pos = $('#target').position();
console.log(pos);

输出结果：

{top: 100, left: 100}

解释：在该示例中，我们通过调用 position() 方法获取了 #target 元素在相对于 #container 元素的位置，即相对于父元素左上角的偏移量。然后将位置信息输出到了控制台上。

示例 2：

HTML 代码：

<div id="container">
  <img id="img-1" src="https://placeimg.com/300/300/animals">
  <img id="img-2" src="https://placeimg.com/300/300/nature">
</div>

CSS 代码：

#container {
  position: relative;
  width: 600px;
  height: 300px;
  background-color: #f5f5f5;
}

img {
  position: absolute;
  top: 0;
  left: 0;
}

jQuery 代码：

var pos1 = $('#img-1').position();
var pos2 = $('#img-2').position();
console.log(pos1);
console.log(pos2);

输出结果：

{top: 0, left: 0}  // img-1 元素相对于 #container 左上角的偏移量为 (0, 0)
{top: 0, left: 300}  // img-2 元素相对于 #container 左上角的偏移量为 (0, 300)

解释：在该示例中，我们将两个不同的图片元素作为 #container 的子元素，并分别获取它们相对于 #container 的偏移量，然后将这些信息输出到控制台上。

至此，我们顺利的完成了 jQuery position() 实例的完整攻略，希望对你有所帮助！

Tags: