JS中的getClientRects与getBoundingClientRect方法

2017年03月25日Web前端

我们有时候会用到元素的具体位置,我们会采取使用逐层计算的方式,但是如果嵌套太深,书写表达式是件麻烦的事,效率往往也不太高。

getClientRects方法

用法:Element.getClientRects() 返回一个TextRectangle集合,即是一个TextRectangleList对象,包含了top、left、bottom、right、width、height这 六个属性。

*{margin:0px;padding:0px;}
#box{position:absolute;left:100px;top:120px;width:200px;border:1px solid #ccc;}
span{border:1px solid red;}
<div id="box">
    <span id="content">hello world hello world hello world hello world hello world hello world</span>
</div>

如图,span标签被分成了三行,document.getElementById('content').getClientRects()的返回值中,我们获得了三个对象,每个对象下面的属性都是其相对与视口左上角顶点的距离。如果我们将#box移动到视口左上角以外的地方,我们也是可以取到值的,只不过是负数而已。

注:这属性最先是由IE提出,后被W3C引入并制订了标准。所以低版本下的IE也是兼容的。只是IE8-(包括)没有width和height属性。当作用于非行内元素时,在IE7-还是会返回多个对象。

getBoundingClientRect方法

用法:Element.getBoundingClientRect(),返回值是一个返回的值是一个DOMRect对象,是元素的大小及其相对于视口的位置的对象。

依旧是getClientRects中用到的div,控制台上输入document.getElementById('box').getBoundingClientRect(),我们得到一个对象,属性和getClientRects中返回的一样,是该元素相对于视口左上角的偏移和宽高。

注:在IE8-下没有宽高这个属性(一直记成IE9+才有这个属性,错啦,这么好用的方法就这么浪费了)。

IE7下的值会多出2px,因为e7-的html元素坐标会从(2, 2)开始算起