開始表演
今天來聊一下兩個相似的方法，它們就是：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點。
落幕
只見幕布徐徐落下，一胖一瘦相扶走下舞台。
題外話，第一次這么寫，感覺很亂，說錯的希望大家指出來，我會虛心改進。謝謝。