聊聊 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