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) //高度同理