getBoundingClientRect

getBoundingClientRect is a method on Element that returns the element’s bounding box as a DOMRectReadOnly object. The rectangle describes the size of the element and its position relative to the viewport, i.e., the visible portion of the document in the window.

The DOMRect includes properties left, top, right, bottom, width, height, and aliases x and y for left and top. All values are expressed in CSS pixels. The rectangle represents the element’s border box (including padding and border but excluding margins) and reflects the current layout, including any CSS transforms. It also accounts for the page’s scrolling, so the coordinates change when the page is scrolled or zoomed.

If the element is not in the render tree or is display: none, the rect may report zeros for size, and the coordinates may be zero or otherwise undefined in practice.

Usage and considerations: getBoundingClientRect is commonly used to position overlays such as tooltips and popovers, to perform hit testing or collision detection, and to determine visibility relative to the viewport. Because the result is relative to the viewport, you can convert to document coordinates by adding window.scrollX and window.scrollY. The method is read-only and supported in modern browsers; it also applies to SVG elements.

In practice, developers rely on it to obtain an element’s on-screen position and size quickly and to drive UI logic that depends on the element’s location within the current view.