JavaScript Element getClientRects() Method

What You’ll Learn

Element.getClientRects() is an instance method that returns a collection of DOMRect objects—one per CSS border box. Learn multiline inline text, how it compares to getBoundingClientRect(), looping rects, and five try-it labs aligned with MDN.

Introduction

Most elements have one border box, so one rectangle is enough. But when text wraps inside an inline element like <span>, each line gets its own border box. getClientRects() exposes every one of those boxes.

The return value is a DOMRectList you can loop with for...of or index like an array. Each DOMRect has top, left, width, and height relative to the viewport.

This page is part of JavaScript Element. Pair it with getBoundingClientRect() for the single-rectangle shortcut.

Understanding the getClientRects() Method

Calling el.getClientRects() collects every CSS border box for the element and returns them as a list of DOMRect objects.

• It is an instance method on Element.
• Takes no parameters (MDN).
• Returns a DOMRectList (array-like collection).
• Multiline inline elements often return multiple rects.
• display:none and non-rendered elements return an empty list.
• Scrolling updates coordinates, same as getBoundingClientRect().

📝 Syntax

General form of Element.getClientRects (MDN):

getClientRects()

Parameters

None.

Return value

A collection of DOMRect objects—one per CSS border box. Each rect’s top and left are relative to the viewport. MDN notes fractional pixel offsets are possible.

Common patterns

const rects = element.getClientRects();

console.log(rects.length);

for (const rect of rects) {
  console.log(rect.top, rect.left, rect.width, rect.height);
}

// First line only:
if (rects.length > 0) {
  console.log(rects[0]);
}

Examples Gallery

Examples follow MDN Element.getClientRects() patterns. Use View Output or Try It Yourself for each case.

const span = document.querySelector("p span");
const paragraph = document.querySelector("p");

console.log(span.getClientRects().length);       // often > 1
console.log(paragraph.getClientRects().length); // usually 1

3
1
(example: span has 3 lines)

const rects = element.getClientRects();

for (const rect of rects) {
  console.log({
    top: rect.top,
    left: rect.left,
    width: rect.width,
    height: rect.height
  });
}

One object per line/box

const span = document.querySelector("span");

const rects = span.getClientRects();
const union = span.getBoundingClientRect();

console.log(rects.length);     // e.g. 3 lines
console.log(union.width);      // spans full wrapped width
console.log(union.height);     // total height of all lines

3
(full width)
(total height)

const items = document.querySelectorAll("ol li");

items.forEach((li, i) => {
  const rect = li.getClientRects()[0];
  console.log(`Item ${i + 1}:`, rect.top, rect.height);
});

Item 1: (top) (height)
Item 2: (top) (height)

const hidden = document.querySelector(".hidden-box");
const visible = document.querySelector(".visible-box");

console.log(hidden.getClientRects().length);  // 0
console.log(visible.getClientRects().length); // 1 or more

0
1

🚀 Common Use Cases

• Highlighting each line of wrapped inline text in a rich editor.
• Text-selection UI that draws overlays per line fragment.
• Measuring individual list items or table rows for animations.
• Building custom caret or range indicators across multiple boxes.
• Debugging layout when one element spans unexpected fragments.
• Choosing per-line vs union measurements before calling getBoundingClientRect().

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Widely available, July 2015).
• Returns a DOMRectList, not a single DOMRect.
• Multiline inline elements often return multiple rectangles.
• display:none returns an empty list (MDN).
• Table captions may be included in table client rects (MDN).
• Related: getBoundingClientRect(), checkVisibility(), JavaScript hub.

💡 Best Practices