JavaScript 计算元素距离父边框距离 | offset() 方法详解 - 常规

使用 JavaScript 计算元素距离父边框距离

可以使用 offset() 方法来计算元素相对于其父元素的距离。

示例

假设有一个元素 id 为 child，其父元素 id 为 parent，可以使用以下代码来计算 child 元素相对于 parent 元素的左侧距离：

var leftDistance = $('#child').offset().left - $('#parent').offset().left;

同样，可以计算 child 元素相对于 parent 元素的顶部距离：

var topDistance = $('#child').offset().top - $('#parent').offset().top;

注意

offset() 方法返回的是相对于页面左上角的距离，因此要减去父元素的 offset() 值。

代码示例

<!DOCTYPE html>
<html>
<head>
<title>计算元素距离父边框距离</title>
<style>
#parent {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  position: relative;
}

#child {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  top: 20px;
  left: 30px;
}
</style>
</head>
<body>
<div id='parent'>
  <div id='child'></div>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script>
var leftDistance = $('#child').offset().left - $('#parent').offset().left;
var topDistance = $('#child').offset().top - $('#parent').offset().top;
console.log('左侧距离：' + leftDistance);
console.log('顶部距离：' + topDistance);
</script>
</body>
</html>

在以上示例中，child 元素相对于 parent 元素的左侧距离为 30px，顶部距离为 20px。

总结

offset() 方法是 JavaScript 中一个非常实用的方法，可以用于计算元素相对于页面或其他元素的距离，方便我们进行各种布局和交互操作。