Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
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
height properties describing the overall border-box in pixels. Properties other than
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
height of zero and where the
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 (
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
left properties (these can be obtained using
window.scrollY) to get a bounding rectangle which is independent from the current scrolling position.
Scripts requiring high cross-browser compatibility can use
window.pageYOffset instead of
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
// rect is a DOMRect object with eight properties: left, top, right, bottom, x, y, width, height var rect = obj.getBoundingClientRect();
|CSS Object Model (CSSOM) View Module
The definition of 'Element.getBoundingClientRect()' in that specification.
|Working Draft||Initial definition|
getBoundingClientRect() was first introduced in the MS IE DHTML object model.
The return value of
getBoundingClientRect() is frozen.
|Feature||Chrome||Edge||Firefox (Gecko)||Internet Explorer||Opera||Safari|
|Basic support||1.0 ||(Yes)||3.0 (1.9) ||4.0 ||(Yes)||4.0|
|width/height||(Yes)||(Yes)||3.5 (1.9.1) ||9||(Yes)||(Yes)|
|x/y||No support||No support ||(Yes)||No support ||?||No support|
|Feature||Android||Chrome for Android||Edge||Firefox Mobile (Gecko)||IE Mobile||Opera Mobile||Safari Mobile|
|Basic support||2.0||1.0||(Yes)||1.0 (1.9)||6.0||(Yes)||4.0|
 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.
 In IE8 and below, the
DOMRect object returned by
width properties. Also, additional properties (including
width) cannot be added onto these
 Gecko 1.9.1 adds
height properties to the
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.