一篇文章让你彻底搞懂JS中的位置计算

什么是位置计算

在前端开发中，经常需要对元素的位置进行计算，例如判断元素是否在屏幕中可见、计算元素的偏移量等等。这些操作都需要用到位置计算。

位置计算指的是计算HTML元素在浏览器窗口中的位置信息，包括元素的宽度、高度、left、top值等等。

元素的位置计算方法

在JS中，我们可以通过以下几种方法来获取元素的位置信息：

1. offset系列属性

offset系列属性针对的是相对于document文档的位置，可以获取元素在文档流中占据的位置信息。

• offsetTop：获取元素上边沿到最近包含它的定位元素或body的顶部的距离。
• offsetLeft：获取元素左边沿到最近包含它的定位元素或body的左边的距离。
• offsetWidth：获取元素的宽度（包括border、padding和content但不包括margin）。
• offsetHeight：获取元素的高度（包括border、padding和content但不包括margin）。

示例代码：

<div id="box">
  <p>Hello World！</p>
</div>

<script>
  const box = document.querySelector('#box')

  console.log(box.offsetTop)     // 输出元素上边沿到最近定位元素的顶部距离
  console.log(box.offsetLeft)    // 输出元素左边沿到最近定位元素的左边距离
  console.log(box.offsetWidth)  // 输出元素的宽度（包括border、padding和content但不包括margin）
  console.log(box.offsetHeight) // 输出元素的高度（包括border、padding和content但不包括margin）
</script>

2. getBoundingClientRect方法

getBoundingClientRect方法也可以获取元素的位置信息，但是它的值是相对于视口左上角的位置。

• top：获取元素上边沿到视口顶部的距离。
• bottom：获取元素下边沿到视口顶部的距离。
• left：获取元素左边沿到视口左边的距离。
• right：获取元素右边沿到视口左边的距离。
• width：获取元素的宽度（包括border、padding和content但不包括margin）。
• height：获取元素的高度（包括border、padding和content但不包括margin）。

示例代码：

#box {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}

<div id="box"></div>

<script>
  const box = document.querySelector('#box')
  const rect = box.getBoundingClientRect()

  console.log(rect.top)     // 输出元素上边沿到视口顶部的距离
  console.log(rect.bottom)  // 输出元素下边沿到视口顶部的距离
  console.log(rect.left)    // 输出元素左边沿到视口左边的距离
  console.log(rect.right)   // 输出元素右边沿到视口左边的距离
  console.log(rect.width)   // 输出元素的宽度（包括border、padding和content但不包括margin）
  console.log(rect.height)  // 输出元素的高度（包括border、padding和content但不包括margin）
</script>

结束语

以上就是JS中的位置计算的方法和示例代码，可以根据实际需求选择合适的方法进行位置计算。