mozilla
Your Search Results

    Element.getBoundingClientRect()

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

    Syntax

    rectObject = object.getBoundingClientRect();
    

    Returns

    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 returned value is a DOMRect object, which contains read-only left, top, right and bottom properties describing the border-box in pixels. top and left are relative to the top-left of the viewport.

    Note: Gecko 1.9.1 adds width and height properties to the DOMRect object.

    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 top and left property change their values as soon as the scrolling position changes (so their values are relative to the viewport and not absolute). If this is not the desired behaviour just add the current scrolling position to the top and left property (via window.scrollX and window.scrollY) to get constant values independent from the current scrolling position.

    For cross-browser compatibility, use window.pageXOffset and window.pageYOffset instead of window.scrollX and window.scrollY. When window.pageXOffsetwindow.pageYOffsetwindow.scrollX and window.scrollY are undefined, use (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop.

    Example

    // rect is a DOMRect object with four properties: left, top, right, bottom
    var rect = obj.getBoundingClientRect();
    

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 3.0 (1.9) 4.0 [1] (Yes) 4.0
    width/height (Yes) 3.5 (1.9.1) 9 (Yes) (Yes)
    Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 2.0 1.0 1.0 (1.9) 6.0 (Yes) 4.0

    [1] In IE8 and below, the DOMRect object returned by getBoundingClientRect() lacks height and width properties. Also, additional properties (including height and width) cannot be added onto these DOMRect objects.

    Starting in Gecko 12.0, the effect of CSS transforms is considered when computing the element's bounding rectangle.

    Specification

    Notes

    getBoundingClientRect() was first introduced in the MS IE DHTML object model.

    The return value of getBoundingClientRect() is frozen.

    See also

    Hide Sidebar