JS中的getClientRects与getBoundingClientRect方法

2017年03月25日Web前端0

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

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)开始算起

JavaScript

目录