临沂网网站建设,白银市住房和城乡建设厅网站首页,微信公众号的h5网站开发,无锡连夜发布最新通告getBoundingClientRect()返回值是一个 DOMRect 对象#xff0c;是包含整个元素的最小矩形#xff08;包括 padding 和 border-width#xff09;。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 … getBoundingClientRect()返回值是一个 DOMRect 对象是包含整个元素的最小矩形包括 padding 和 border-width。该对象使用 left、top、right、bottom、x、y、width 和 height 这几个以像素为单位的只读属性描述整个矩形的位置和大小。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的卷起的高度是不被计算在内的。 rectObject.top元素上边到视窗上边的距离; rectObject.right元素右边到视窗左边的距离; rectObject.bottom元素下边到视窗上边的距离; rectObject.left元素左边到视窗左边的距离; rectObject.width是元素自身的宽 rectObject.height是元素自身的高 div idcontainerdiv idson/div/divstyle*{margin: 0; padding: 0;}#container{width: 100px;height: 100px;background-color: red;margin-top: 20px;margin-left: 10px;position: relative;}#son{position: absolute;left: 10px;top: 10px;width: 50px;height: 50px;background-color: blue;}/stylelet ele document.getElementById(son);let obj ele.getBoundingClientRect();console.log(obj)我们发现是相当于视口的 高度方向:top102030 左侧left 1010 20
![在这里插入图片描述](https://img-blog.csdnimg.cn/2b6d9a6b14fa40a28c780f90a693e399.png
若给continer设置一个黑色的border,则高度和左侧均需要加1px则为31px和21px