getBoundingClientRect获取DOM元素获取的宽和高以及位置

最新推荐文章于 2024-10-16 08:45:00 发布

tinfengyee

最新推荐文章于 2024-10-16 08:45:00 发布

阅读量2.6k

点赞数 2

分类专栏：前端 # JS/TS

本文链接：https://blog.youkuaiyun.com/tinfengyee/article/details/104176129

版权

前端同时被 2 个专栏收录

27 篇文章

订阅专栏

JS/TS

11 篇文章

订阅专栏

dom.getBoundingClientRect()

记得小程序也有个类似的方法

属性说明:
width, height: 元素的实际宽度 / 宽度
left: 元素左边距离视口左边的距离
right: 元素右边距离视口左边的距离
top: 元素上边距离视口上边的距离
bottom: 元素下边距离视口上边的距离

注意:
宽高包含padding, border
距离根据视口/文档?为起点, 而不是父元素

x, y: 元素左上角距离视口左上角边的距离

代码

.par {
  position: relative;
  top: 0;
  left: 10px
  width: 500px;
  height: 500px;
  background-color: #fff;
}
.back-top {
  position: absolute;
  /* bottom: 50px; */
  left: 10px;
  top: 10px;
  width: 150px;
  height: 150px;
  /* height: 174px; */
  background-color: aqua;
  border: 50px solid #cccccc;
  margin: 10px;
  padding: 20px;
}

<div class="par">
  <div class="back-top" style="right: 0px;display: block;"></div>
</div>

const back = document.querySelector('.back-top')
const distance = back.getBoundingClientRect()
console.log(distance)
// 实际宽为height和width
// 或者实际宽度(290) = right(320) - left(30) //高度同理