如何使用js getBoundingClientRect的详细说明

主要介绍了GetBoundingClient的基本属性，以及具体的使用场景和需要注意的一些问题。

方法

Element.getboundingclient()含义：

方法返回元素的大小及其相对于视口的位置。

价值：

返回值是一个DOMRect对象，它是元素的getClientRects()方法返回的矩形的集合，也就是与元素相关的CSS边框的集合。

属性值：

顶部：从元素顶部到页面左侧顶部的距离：从元素右侧到页面右侧左侧的距离：从底部的距离：从元素底部到页面宽度顶部的距离：元素宽度高度：元素高度

注意：

如果所有元素边框都是空边框，则此矩形返回的宽度和高度为0，左值和上值是第一个css框的左上方值(按内容顺序)。

计算边框时，会考虑视口区域(或其他可滚动元素)的滚动操作，即当滚动位置发生变化时，顶部和左侧属性值会立即发生变化(因此，它们的值是相对于视口的，而不是绝对的)。

如果需要获取相对于整个网页左上角的属性值，可以通过将当前滚动位置(通过window.scrollX和window.scrollY)添加到上下属性值中，得到与当前滚动位置无关的值。

如图所示：

当页面的元素位于浏览器的左上角时，顶部和左侧的值为负值，右侧和底部的值为正值。

应用场景一

1.获取dom元素相对于网页左上角的定位距离

前面写的是通过offsetParent找到元素定位父元素，然后递归到顶层元素体或者html。

//获取dom元素相对于网页左上角的定位距离。函数偏移量(El){ var top=0；var left=0；//还有getBoundingClientRect方法来获取元素的位置。//从网上得知offset不兼容好，设置translate3D的y轴值定位元素的y轴距离后，//offsetTop为0 do { top=el.offsetTopleft=el.offsetLeft} while(El=El . offsetparent)；//存在兼容性问题，需要兼容return {top:top，left:left}}。测试代码如下：

var odiv=document . getelementsbyclassname(' markdown-body ')；偏移量(a[0])；//{top: 271，left: 136}现在，根据api getboundingclient，可以写成如下形式：

var positionX=this . getboundingclientrect()。left document . document element . scroll left；var positionY=this . getboundingclientrect()。top document . document element . scrolleft；应用场景2

2.确定元素是否在可见区域

函数isElView(El){ var top=El . getboundingclientrect()。顶部；//从元素顶部到可见区域顶部的距离var bottom=el.getboundingcenter()。底部；//元素底部到可见区域顶部的距离var se=document . document element . client height；//浏览器可见区域的高度。if(顶部se底部0){ return true；} else if(top=se | | bottom=0){//invisible }返回false}缺点

频繁计算此属性将导致页面重绘，这可能会影响页面的性能。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。