.getBoundingClientRect()

.getBoundingClientRect()是一个用于获取元素位置的方法。它返回一个包含元素位置信息的对象，包括元素的左、上、右、下边框距离视口的距离，以及元素本身的宽度和高度。

通过调用元素对象的getBoundingClientRect()方法，可以获取元素相对于浏览器视口的位置和尺寸信息。例如，使用div.getBoundingClientRect()可以获取一个div元素在视口中的位置和大小。

返回的对象包含以下属性：
- top：元素上边框距离视口上边的距离
- right：元素右边框距离视口左边的距离
bottom：元素下边框距离视口上边的距离
- left：元素左边框距离视口左边的距离
- width：元素自身的宽度
- height：元素自身的高度

这个方法非常有用，可以用于实现一些需要根据元素位置做出相应的交互效果的场景。比如，可以根据元素的位置调整其显示状态，或者根据元素的位置计算出它与其他元素的相对关系等等。需要注意的是，getBoundingClientRect()返回的位置信息是相对于视口的，而不是整个文档的。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [js getBoundingClientRect使用方法详解](https://download.csdn.net/download/weixin_38696922/14810532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [js中getBoundingClientRect()方法详解](https://blog.csdn.net/m0_46672781/article/details/126329300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [getBoundingClientRect()方法详解](https://blog.csdn.net/weixin_44222717/article/details/103712405)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]