聊聊 getClientRects 和 getBoundingClientRect 方法

开始表演

今天来聊一下两个相似的方法，它们就是：getBoundingClientRect()、getClientRects()。

只见它们俩手拉手地登上了舞台，一个鞠躬，便开始滔滔不绝起来。

自述

getClientRects()

“我来了，你看到我了，当然看到我咯，彪悍一个。”

“想知道怎么驾驭我吗？你想吗？像这样。”

let rectList = document.getElementById('box').getClientRects();
/*
我返回的是一个包含一个或多个 DOMRect 对象的数组；
哈哈，这也是我稍微彪悍的原因。
*/

“在这里，我要粗略讲下什么是DOMRect对象（也是ClientRect对象、TextRectangle对象）。它呢，是一个盒子的边界矩形，简单看就是一个包着内容的盒子。”

“在我这里，所有规则我说了算。”

“块级元素我认为就是一个整体，所以在我这里，块级元素直接返回盒子模型的矩形范围。”

“不过呢，行内元素会产生自动换行这类看似分割整体的歧义，所以，我会把行内元素根据它换行划分成多个盒子边界矩形。这也是我和我的兄弟——getBoundingClientRect的区别。也是我对我返回类型的一种解释吧。”

“每个盒子边界矩形都有些什么？能带给我们什么惊喜？哈哈，就让我的兄弟给你们说吧！我累了，坐会。”

getBoundingClientRect()

“终于到我了，想必等很久了吧，那我再等我清下嗓子，咳咳。开始咯！”

“你要像这样子使用我，而且我对块级元素和行内元素是一视同仁的，可能我心比较大吧。”

let rectObject = document.getElementById('box').getBoundingClientRect();
/* 返回的是一个 DOMRect（或者叫 TextRectangle、ClientRect） 对象：
[object DOMRect] {
    bottom: 208,
    height: 200,
    left: 8,
    right: 208,
    top: 8,
    width: 200,
    x: 8,
    y: 8,
    toJSON: function toJSON() {...}
}
*/

“忘了最重要的自我介绍了，那还是要说下的。”

“我是会返回元素的大小和它相对于视窗的位置，即，除了大小（width和height）其余的属性都是相对于视窗的左上角位置而言的，所以当存在滚动时，位置有可能是负值，还有一点，这些都是只读属性。”

图例：

图上白色区域的即是视窗区域，左上角为0，0点。

落幕

只见幕布徐徐落下，一胖一瘦相扶走下舞台。

题外话，第一次这么写，感觉很乱，说错的希望大家指出来，我会虚心改进。谢谢。

参考

• getBoundingClientRect
• getClientRects