JavaScript Element getBoundingClientRect() Method

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

Definition

In JavaScript, the getBoundingClientRect() method returns a DOMRect describing an element’s size and position relative to the viewport (MDN).

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

Syntax

Call el.getBoundingClientRect. Start with this line.

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

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

Library declarations
JavaScript
el.getBoundingClientRect()

Parameters

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

Return Value

Return ValueDescription
*DOMRect

JavaScript Examples

Example 1 — Read Width and Height

Measure the border-box size of an element.

JavaScript
const el = document.getElementById("box");
const rect = el.getBoundingClientRect();

console.log(rect.width);
console.log(rect.height);
Try It Yourself

How It Works

  1. Select the element. Any Element node works.
  2. Call the method. No arguments — returns a DOMRect.
  3. Read size. width / height are CSS pixels for the border box.
  4. Includes padding + border. Not content-only (MDN).

Example 2 — Viewport Position

Read where the element sits relative to the visible viewport.

JavaScript
const rect = document.getElementById("box").getBoundingClientRect();

console.log(rect.top);
console.log(rect.left);
console.log(rect.right);
console.log(rect.bottom);
Try It Yourself

How It Works

  1. Origin is the viewport. top/left are distances from the visible window edges.
  2. Edges are linked. right ≈ left + width, bottom ≈ top + height.
  3. Scroll changes values. Scroll the page and the numbers move (MDN).
  4. Useful for UI. Tooltips, sticky headers, and “is it on screen?” checks.

Example 3 — Document Coordinates

MDN pattern: add scroll offsets for a scroll-independent position.

JavaScript
const rect = document.getElementById("box").getBoundingClientRect();

const docTop = rect.top + window.scrollY;
const docLeft = rect.left + window.scrollX;

console.log(docTop);
console.log(docLeft);
Try It Yourself

How It Works

  1. Start from the viewport rect. Same getBoundingClientRect() call.
  2. Add scrollY / scrollX. Converts viewport space → document space (MDN).
  3. Stable while scrolling. Document coords stay put as the viewport moves.
  4. Use when needed. Anchors, canvas overlays, or saving layout positions.
Compatibility

Browser Support

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

✓ Baseline · Widely available

getBoundingClientRect()

Returns a DOMRect with size and position relative to the viewport.

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
getBoundingClientRect() Excellent

Bottom line: Use for tooltips, hit-testing, and layout measurements — remember values are viewport-relative and include the border box.

Frequently Asked Questions

It returns a DOMRect with the element’s size and its position relative to the viewport. Properties include top, left, right, bottom, x, y, width, and height in pixels (MDN).
No. MDN marks Element.getBoundingClientRect() as Baseline Widely available (across browsers since July 2015). It is not Deprecated, Experimental, or Non-standard.
Yes. MDN: the returned rectangle is the border box, including padding and border-width (not only content). With box-sizing: border-box, width/height match the CSS width/height.
Yes. top, left, right, and bottom are relative to the viewport, so they change when the page scrolls. Add window.scrollX and window.scrollY for document coordinates (MDN).
clientWidth is a single number for inner width. getBoundingClientRect() returns a full DOMRect with both size and viewport position.
Use getClientRects() when an element spans multiple lines (like inline text) and you need one rectangle per fragment. getBoundingClientRect() returns the union of those boxes (MDN).

Next: getClientRects()

Learn how to read one rectangle per CSS box fragment.

getClientRects 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 getAttributeNS() Method JavaScript Element getClientRects() Method