JavaScript Element getClientRects() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word GETCLIENTRECTS

Definition

In JavaScript, the getClientRects() method returns a collection of DOMRect objects—one for each CSS border box of the element (MDN). Most elements have one box; a wrapping inline element can have one box per line.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.getClientRects. Start with this line.

JavaScript
el.getClientRects()
CallWhat it does
el.getClientRects()Primary signature.
el.getClientRects(...)Call with the arguments your case needs.

Built into the browser. Call getClientRects(...) on an Element — no import required.

Library declarations
JavaScript
el.getClientRects()

Parameters

This member has no parameters beyond those shown in the signature.

Return Value

Return ValueDescription
*Collection of DOMRect (array-like)

JavaScript Examples

Example 1 — Count Border Boxes

See how many rects a wrapping <span> returns.

JavaScript
const span = document.getElementById("line");
const rects = span.getClientRects();

console.log(rects.length);
Try It Yourself

How It Works

  1. Target an inline element. Wrapping <span> text is the classic case (MDN).
  2. Call getClientRects(). No arguments.
  3. Read length. One entry per CSS border box / line.
  4. Expect variation. Wider viewports may wrap less → smaller length.

Example 2 — Loop Each Rect

Print top and width for every fragment.

JavaScript
const rects = document.getElementById("line").getClientRects();

for (let i = 0; i < rects.length; i++) {
  const r = rects[i];
  console.log(i, r.top, r.width);
}
Try It Yourself

How It Works

  1. Get the collection. Array-like: use length and index access.
  2. Loop each box. Each item is a DOMRect.
  3. Read geometry. top/left/width/height are viewport-relative.
  4. Scroll changes values. Same viewport rules as getBoundingClientRect.

Example 3 — vs getBoundingClientRect()

Fragments vs one union rectangle (MDN).

JavaScript
const el = document.getElementById("line");
const rects = el.getClientRects();
const union = el.getBoundingClientRect();

console.log(rects.length);
console.log(union.width, union.height);
Try It Yourself

How It Works

  1. Count fragments. getClientRects().length can be > 1.
  2. Measure the union. getBoundingClientRect() is one covering box.
  3. Union height grows. It spans from the first line top to the last line bottom.
  4. Pick by need. Per-line highlights → client rects; one tooltip box → bounding rect.
Compatibility

Browser Support

Element.getClientRects() is Baseline Widely available (MDN: across browsers since July 2015). Safe to use in modern evergreen browsers.

✓ Baseline · Widely available

getClientRects()

Returns one DOMRect per CSS border box — useful for multiline inline text.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
getClientRects() Excellent

Bottom line: Use getClientRects for per-line / per-box geometry; use getBoundingClientRect when one union box is enough.

Frequently Asked Questions

It returns a collection of DOMRect objects—one for each CSS border box associated with the element. Each rect describes size and viewport-relative position in pixels (MDN).
No. MDN marks Element.getClientRects() as Baseline Widely available (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
getClientRects() returns every border box (multiple for wrapped inline text). getBoundingClientRect() returns one DOMRect that is the union of all those boxes (MDN).
MDN: a multiline inline-level element (such as a wrapping span) has a border box around each line. A block-level paragraph usually has only one.
An empty list (length 0). MDN: elements that are not directly rendered—including display:none—return no rectangles.
Yes. Coordinates are viewport-relative and change when you scroll. Add scroll offsets if you need document coordinates.

Next: getElementsByClassName()

Learn how to collect elements that share a class name.

getElementsByClassName tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element getBoundingClientRect() Method JavaScript Element getElementsByClassName() Method