The JavaScript getBoundingClientRect() method
The getBoundingClientRect() method returns an element's size and position relative to the viewport, as an object with top, left, right, bottom, width and height. el.getBoundingClientRect() is how you measure exactly where an element is on screen — for positioning tooltips, checking visibility, or measuring layout.
Overview
getBoundingClientRect() measures an element: it returns a DOMRect with the element's width and height and its top, left, right and bottom edges — all relative to the viewport (the visible window), in pixels. It's the precise way to find out where something actually is and how big it is after layout, which CSS alone can't tell your JavaScript.
Common uses include positioning a tooltip or popover next to a trigger element, measuring an element's rendered size, detecting whether something is in view, and drag-and-drop hit testing. Because the coordinates are viewport-relative, they change as you scroll — to get a position relative to the whole document instead, add the scroll offset: rect.top + window.scrollY.
A performance note: calling it forces the browser to calculate layout (a "reflow"), so reading it in a tight loop or interleaving reads and style writes can cause layout thrashing. Batch your measurements. For the related job of detecting when an element enters or leaves the viewport, an IntersectionObserver is more efficient than repeatedly calling getBoundingClientRect() on scroll.
Syntax
const rect = element.getBoundingClientRect();
rect.width; // rendered width in px
rect.height;
rect.top; // distance from viewport top
rect.left;
// position relative to the whole document
const pageTop = rect.top + window.scrollY;Parameters
The getBoundingClientRect() method accepts the following parameters.
| Parameter | Description |
|---|---|
element |
Called on the element to measure. Returns a DOMRect with x/y/width/height/top/right/bottom/left. |
Example
<div id="box" style="width:160px;height:60px;background:#1c7ce9;border-radius:8px"></div>
<pre id="out" style="font:14px ui-monospace,monospace;margin-top:8px"></pre>
<script>
const rect = document.getElementById('box').getBoundingClientRect();
document.getElementById('out').textContent =
'width: ' + rect.width + '\n' +
'height: ' + rect.height + '\n' +
'top: ' + Math.round(rect.top);
</script>Best practices
- Use it to measure an element's rendered size and viewport position.
- Add
window.scrollY/scrollXto convert to document coordinates. - Batch reads to avoid layout thrashing — don't interleave reads with style writes.
- For viewport-visibility detection, prefer IntersectionObserver over repeated calls on scroll.
Frequently asked questions
What does getBoundingClientRect() return?
DOMRect with the element's width, height and edge positions (top, left, right, bottom) relative to the viewport.How do I get an element's position on the page?
rect.top + window.scrollY.Why are the values different after scrolling?
window.scrollY/scrollX for absolute page positions.