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

最新推荐文章于 2024-04-07 17:49:25 发布

cukw6666

最新推荐文章于 2024-04-07 17:49:25 发布

阅读量346

点赞数

文章标签： python java js html css ViewUI

原文链接：https://www.digitalocean.com/community/tutorials/js-getboundingclientrect

版权

getBoundingClientRect, part of the JavaScript DOM (Document Object Model), provides you with important pieces of data about an HTML element’s size and positioning.

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

使用getBoundingClientRect (Using getBoundingClientRect)

First, some simple markup:

首先，一些简单的标记：

<div id="foo">Hello World</div>

And now let’s call getBoundingClientRect on our #foo element:

现在让我们在#foo元素上调用getBoundingClientRect ：

document.getElementById('foo').getBoundingClientRect();
// =>  {
//       top: Number,
//       left: Number,
//       right: Number,
//       bottom: Number,
//       x: Number,
//       y: Number,
//       width: Number,
//       height: Number,
//     }

getBoundingClientRect returns an object with several fields and gives you sufficient information to infer everything about an HTML Element’s size and positioning within a webpage.

getBoundingClientRect返回带有多个字段的对象，并为您提供足够的信息来推断有关HTML元素的大小和在网页中的位置的所有信息。

Here’s an illustration describing what each of the fields mean:

这是描述每个字段含义的插图：

There’s A LOT to chew on in this illustration. Take some time to let the info absorb!

在这个插图中有很多东西可以咀嚼。花一些时间让信息吸收！

Since the x and y values are redundant with left and top (respectively) and some browsers actually omit supplying them… You can sorta pretend like they don’t exist 🤭. It’s generally advisable to avoid using them for these reasons.

由于x和y值分别是left和top冗余，并且某些浏览器实际上省略了提供这些值……您可以假装它们不存在🤭。出于这些原因，通常建议避免使用它们。

Another thing to notice is that right/bottom aren’t quite what you may be accustomed to in CSS positioning (eg.: when positioning using position: absolute).

需要注意的另一件事是，在CSS定位中，您可能不习惯right / bottom (例如：当使用position：absolute定位时)。

学习运动 (Learning Exercise)

Let’s try applying our knowledge! Given the illustration below what would be the output of getBoundingClientRect()?

让我们尝试运用我们的知识！鉴于下面的说明， getBoundingClientRect()的输出是什么？

{
  top: 450,
  left: 400,
  right: 825,
  bottom: 500,
  x: 400,  // "x" is always equal to "left"
  y: 450,  // "y" is always equal to "top"
  width: 425,
  height: 50
}

笔记 (Notes)

getBoundingClientRect provides a rich amount of data, however the downside is that it can be overwhelming if you haven’t used it before.

getBoundingClientRect提供了大量的数据，但是缺点是，如果您以前没有使用过它，可能会使您不知所措。

Here’s some tidbits to remember that’ll help you!

这里有一些小窍门要记住，它将帮助您！

The bottom and right values in getBoundingClientRect are different than how it’s used in CSS positioning.
getBoundingClientRect中的bottom值和right值与CSS定位中使用的值不同。
Some browsers won’t include x and y values so it’s advisable to avoid using on them.
某些浏览器不会包含x和y值，因此建议避免在它们上使用。
Since getBoundingClientRect is relative to the viewport, you can add window.scrollY and window.scrollX values to the top and left fields (respectively) to get the HTML element’s position relative to the entire webpage.
由于getBoundingClientRect是相对于视口的，因此可以将window.scrollY和window.scrollX值分别添加到top和left字段中，以获取HTML元素相对于整个网页的位置。

浏览器兼容性 (Browser Compatibility)

getBoundingClientRect is reliably supported on all desktop and mobile browsers (with the exclusion of the x and y values which is unstable in IE/Edge and Safari)

所有台式机和移动浏览器均可靠地支持getBoundingClientRect (不包括x和y值，在IE / Edge和Safari中不稳定)