使用 getBoundingClientRect 获取元素的大小和位置

介绍

getBoundingClientRect是JavaScript DOM（文档对象模型）的一部分，为您提供有关HTML元素大小和位置的重要数据。

在本文中，您将使用getBoundingClientRect获取元素的大小和位置。

先决条件

要完成本教程，您应该熟悉以下概念：

理解 getBoundingClientRect()

要使用getBoundingClientRect，首先获取一个 HTML 元素并调用getBoundingClientRect该元素：

document.getElementById("foo").getBoundingClientRect();

getBoundingClientRect返回一个带有多个键/值对的对象，为您提供有关元素在网页中的大小和位置的信息。

Output
{
  top: 450,
  left: 400,
  right: 825,
  bottom: 500,
  x: 400,  
  y: 450,  
  width: 425,
  height: 50
}

下图描述了为每个值返回的信息：

说明性示例 1

该x和y值将等同于left和top值。正因为如此，一些浏览器省略了xandy并且只返回leftand top。

另一件需要注意的事情是right/bottom可能与你习惯的 CSS 定位不同，比如使用position: absolute.

这是一个插图，显示了值以及它们与元素的关系：

说明性示例 2

现在您已经看到了getBoundingClientRect()返回的内容，请使用相同的示例来查看您是否理解getBoundingClientRect().

使用getBoundingClientRect中的应用

要getBoundingClientRect在您自己的代码中使用，您需要一个包含要查询的元素的 HTML 文档。

创建一个boundingbox.html在文本编辑器中调用的新 HTML 文件：

  • nano boundingbox.html`

在该文件中，创建一个包含HTML文档<div>的标签<body>用id的hello“

边界框.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>useBoundingBox example</title>
  </head>
  <body>
    <div id="hello">Hello World</div>
  </body>
</html>

一旦页面上有一个元素，您就可以调用getBoundingClientRect该#foo元素。在结束<body>标记下方，添加一个新<script>标记。在<script>标签内，使用idofhello和 call获取元素getBoundingClientRect()。将结果打印到 JavaScript 控制台：

边界框.html
<body>
  <div id="hello">Hello World</div>

  <script>
  const helloElement = document.getElementById('hello');
  const results = helloElement.getBoundingClientRect();
  </script>

</body>

保存文件并加载boundingbox.html到浏览器中。

控制台显示此输出：

Output
bottom: 27.199996948242188
height: 19.199996948242188
left: 8
right: 1261
top: 8
width: 1253
x: 8
y: 8

#hello元素的输出显示它在网页上的大小和位置。您可以使用此信息相对于该元素定位其他元素、动画元素等。

结论

在本文中，您看到它getBoundingClientRect提供了关于元素位置的大量数据。由于getBoundingClientRect是相对于视口，您可以向和字段添加window.scrollY和window.scrollX值以获取 HTML 元素相对于整个网页的位置。topleft

它在所有桌面和移动浏览器上得到可靠支持，不包括在旧版本的 Internet Explorer/Edge 和 Safari 中不稳定的x和y值。

有关getBoundingClientRect您的更多详细信息，可以阅读 W3C 的CSS 对象模型 (CSSOM) 视图模块的官方规范 。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁