getBoundingClientRect() 方法

红太狼 2020-05-26 15:41 768阅读 0赞

# getBoundingClientRect() 方法

JavaScript对dom操作的所有方法使用方式都是非常简单的。

难点在于理解此方法具体的作用什么，如果了解它的实质，一切都会感觉那么简单。

本文所要介绍的方法也是如此，看起来比较唬人，其实非常简单，尤其是结合图示介绍。

此方法能够获取元素四个边界相对于浏览器客户区的距离，首先要搞清楚如下概念：

（1）.客户区：所谓客户区就是浏览器展示网页具体内容的区域，不包括地址栏或者书签栏这些地方。

（2）.元素：自然是位于页面中的元素，它既可以位于客户区范围内，也可以在其范围之外。

语法结构：

```javascript
oRect = dom.getBoundingClientRect()
```

此方法返回一个对象，对象具有四个属性：

（1）.left：返回dom元素左边界距离客户区左部的距离，返回值是一个数字，单位是像素。

（2）.top：返回dom元素上边界距离客户区顶部的距离，返回值是一个数字，单位是像素。

（3）.right：返回dom元素右边界距离客户区左部的距离，返回值是一个数字，单位是像素。

（4）.bottom：返回dom元素底边界距离客户区顶部的距离，返回值是一个数字，单位是像素。

**浏览器支持：**

（1）.IE浏览器支持此方法。

（2）.火狐浏览器支持此方法。

（3）.Opera浏览器不支持此方法。

（4）.谷歌浏览器支持此方法。

（5）.safria浏览器支持此方法。

前面对此方法进行了大量概念上的阐述，肯定有不少朋友看了感觉有点迷糊。

不用担心，下面给出图示，也许一张图片比上面所有文本的作用都要大：
![](/images/1590507609786.gif)

图片说明：

（1）.蓝色矩形就是一个dom元素，它位于客户区内。

（2）.灰色的区域就是浏览器的客户区，也就是浏览器真正显示网页内容的部分。

关于getBoundingClientRect方法的功能已经被图片展示的很清楚，无需再多介绍。

还有一种情况是，元素在客户区之外，那么我们应该如何去计算相关尺寸呢，还是图片比较清楚：

![](/images/1590507663648.gif)

图片说明：

（1）.蓝色矩形有一个部分位于客户区之外，距离的计算方式没有任何不同。

**代码实例如下：**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<title>蒲公英云</title>
<style type="text/css">
body{
  height:1000px;
  width:1500px;
  text-align:center;
}
#text{
  width:100px;
  height:100px;
  background-color:#60C;
  margin-top:100px;
  margin-left:50px;
}
#zuobiao{
  width:150px;
  height:150px;
  background-color:#F30;
  position:absolute;
  top:250px;
  left:250px;
  font-size:12px;
}
</style>
<script> 
window.onscroll=function(){ 
  let otext=document.getElementById("text");
  let ozuobiao=document.getElementById("zuobiao");
  let oRect=otext.getBoundingClientRect();
  ozuobiao.innerHTML="left:"
  +oRect.left+"<br/>top:"
  +oRect.top+"<br/>right:"
  +oRect.right+"<br/>bottom:"
  +oRect.bottom;
} 
</script> 
</head> 
<body> 
  <div id="text"></div>
  <div id="zuobiao"></div>
</body> 
</html>
```

上面代码是一个简单的代码实例，分析如下：

（1）.我们要获取的是紫色矩形框在客户区中的位置。

（2）.橙色矩形框用于显示相关信息。

（3）.为window注册scroll事件，拖动滚动条能够实时将信息显示于橙色div中。

特别注意的是，此方法的返回值是一个对象，此对象具有四个方位属性，这四个属性返回数字，不带单位。