文章导航

getBoundingClientRect() 方法

2019-3-22 23:18| 作者: admin| 查看: 671| 评论: 0|来自: 蚂蚁部落

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浏览器支持此方法。

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

不用担心,下面给出图示,也许一张图片比上面所有文本的作用都要大:

a:3:{s:3:\"pic\";s:43:\"portal/201903/22/231933jutzssgguo1tgt21.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图片说明:

(1).蓝色矩形就是一个dom元素,它位于客户区内。

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

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

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

a:3:{s:3:\"pic\";s:43:\"portal/201903/22/231948hr02t0eh0yweryy0.gif\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

图片说明:

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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中。

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


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部