element.getBoundingClientRect

The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.

Syntax

var domRect = element.getBoundingClientRect();

Value

The returned value is a DOMRect object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element. The result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

Empty border-boxes are completely ignored. If all the element's border-boxes are empty, then a rectangle is returned with a width and height of zero and where the top and left are the top-left of the border-box for the first CSS box (in content order) for the element.

The amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when computing the bounding rectangle. This means that the rectangle's boundary edges (top, left, bottom, and right) change their values every time the scrolling position changes (because their values are relative to the viewport and not absolute). If you need the bounding rectangle relative to the top-left corner of the document, just add the current scrolling position to the top and left properties (these can be obtained using window.scrollX and window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.

Scripts requiring high cross-browser compatibility can use window.pageXOffset and window.pageYOffset instead of window.scrollX and window.scrollY. Scripts without access to these properties can use code like this:

// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
  && typeof t.scrollTop == 'number' ? t : document.body).scrollTop

Example

// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height
var rect = obj.getBoundingClientRect();

Specifications

Notes

The returned DOMRect object can be modified in modern browsers. This was not true with older versions which effectively returned DOMRectReadOnly. With IE and Edge, not being able to add missing properties to their returned ClientRect MSDN: ClientRect object prevents backfilling x and y.

Due to compatibility problems (see below), it is safest to rely on only properties left, top, right, and bottom.

Properties in the returned DOMRect object are not own properties. While the in operator and for...in will find returned properties, other APIs such as Object.keys() will fail. Moreover, and unexpectedly, the ES2015 and newer features such as Object.assign() and object rest/spread will fail to copy returned properties.

rect = elt.getBoundingClientRect()
// The result in emptyObj is {} 
emptyObj = Object.assign({}, rect)
emptyObj = { ...rect }
{width, ...emptyObj} = rect

DOMRect properties top left right bottom are computed from the other property values.

Browser compatibility

[1] CSS spec for 'use' element referencing 'symbol' element requires default width and height for the <use> element set to 100%. Also spec for width and height 'svg' attributes requires 100% as default values. Google Chrome does not follow these requirements for <use>. Also Chrome does not take stroke-width into account. So getBoundingClientRect() may return different rectangles for Chrome and for Firefox.

[2] In IE8 and below, the returned non-standard ClientRect object lacks height and width, in addition to lacking x and y properties. The object was read-only which prevented inserting these as computed values for compatibility.

[3] Gecko 1.9.1 adds width and height properties to the DOMRect object.

Starting in Gecko 12.0 (Firefox 12.0 / Thunderbird 12.0 / SeaMonkey 2.9), the effect of CSS transforms is considered when computing the element's bounding rectangle.

[4] IE and Edge return a non-standard ClientRect object MSDN: ClientRect which does not have the x and y properties found in standard DOMRect objects.

[5] Safari Mobile will modify the effective viewport based on the user zoom. This results in incorrect values whenever the user has zoomed.

See also

• getClientRects()
• MSDN: getBoundingClientRect Method
• MSDN: ClientRect , an earlier version of DOMRect