使用.position()获取元素相对于父元素的位置

翻滚的胖子
2023-08-23 10:31:15
前端技术
JavaScript

使用.position()获取元素相对于父元素的位置

在Web开发中，经常需要获取元素在页面中的位置信息。jQuery提供了.position()方法来获取元素相对于父元素的位置。

语法

$(selector).position()

该方法返回一个包含元素相对于父元素的top和left属性的对象。

示例

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
}
</style>
</head>
<body>

<div id="myDiv"></div>

<script>
$(document).ready(function(){
  var position = $('#myDiv').position();
  console.log('top: ' + position.top);
  console.log('left: ' + position.left);
});
</script>

</body>
</html>

在上面的示例中，我们首先定义了一个宽高为100px的div元素，并设置其position属性为relative。然后使用.position()方法获取该元素相对于父元素的位置，并通过console.log()打印出top和left属性的值。