使用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
andright
values ingetBoundingClientRect
are different than how it’s used in CSS positioning.getBoundingClientRect
中的bottom
值和right
值与CSS定位中使用的方法不同。 -
Some browsers won’t include
x
andy
values so it’s advisable to avoid using on them.某些浏览器不会包含
x
和y
值,因此建议避免在它们上使用。 -
Since
getBoundingClientRect
is relative to the viewport, you can addwindow.scrollY
andwindow.scrollX
values to thetop
andleft
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中不稳定)
规范 (Specification)
Read the official W3C CSS Object Model (CSSOM) View Module spec for detailed information about getBoundingClientRect
.
阅读正式的W3C CSS对象模型(CSSOM)视图模块规范,以获得有关getBoundingClientRect
详细信息。
翻译自: https://www.digitalocean.com/community/tutorials/js-getboundingclientrect
上一篇: vue屏幕自适应
下一篇: selenium设置浏览器的大小和位置
推荐阅读
-
js获取元素坐标位置(js中var和let的区别)
-
获取控件大小和设置调整控件的位置XY示例
-
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
-
js获取元素坐标位置(js中var和let的区别)
-
获取控件大小和设置调整控件的位置XY示例
-
论DOM中文档和元素的位置大小属性及其区别
-
getBoundingClientRect方法获取元素在页面中的相对位置
-
javascript getBoundingClientRect()获取元素四个角相对于窗口或文档的位置
-
使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式
-
getBoundingClientRect()方法获取Dom元素与浏览器窗口的位置