getClientRects返回的数组是什么用？

Question

document.getElementById('main').getClientRects()返回一个ClientRectList里面是一个数组，数组的第一项是和getBoundingClientRect返回的东西一样，那它返回数组有什么其他用处么？

Answer 1

好好看 MDN 的文档啊，文档上的说明和示例都已经说的很清楚了诶。对于 块级元素 来说，这两个其实没有什么区别的，关键是对于 内联元素 这两个有明显的区别。简单的说就是 内联元素 不在一行的时候每行都会产生一个矩形范围，而 getBoundingClientRect 并不会。

就拿 MDN 上的示例来说吧，我们先看下效果：http://jsfiddle.net/731a4Lej/ 预览中的红色方框都是该元素的矩形范围，也就是 getClientRects 返回的值。三个块中第一个块是原始效果，第二个框是 块级元素 p 标签的矩形范围，而第三个是 p 标签内的 内联元素 span 的矩形范围。通过示例可以看出来，如果是 块级元素 的话会直接返回盒子模型的矩形范围，如果是 内联元素 的话则会返回 每一个盒子的边界矩形的集合。如果要更清楚的对比一下两者的区别的话，根据这个示例将两者的返回内容打印出来做比较可能清楚一点：https://jsfiddle.net/aghp4bg8/5/embedded/result/