In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > box and rectangle > methods > getBoundingClientRect

getBoundingClientRect method

Browser support:

	3	9.5	4

Returns a TextRectangle object that specifies the bounding rectangle of the current element or TextRange object, in pixels, relative to the upper-left corner of the browser's client area.

The returned TextRectangle object includes the padding, scrollbar, and the border, but excludes the margin. In Internet Explorer, the coordinates of the bounding rectangle include the top and left borders of the client area.

The getBoundingClientRect is supported in Firefox from version 3, in Opera from version 9.5 and in Safari from version 4. Use the offsetLeft, offsetTop, offsetWidth and offsetHeight properties in older versions of Firefox, Opera and Safari.

Be careful about the getBoundingClientRect method!
In Internet Explorer earlier than version 8, the returned TextRectangle object contains the coordinates in physical pixel size, while from version 8, it contains the coordinates in logical pixel size.
What does it mean?
If the browser is not at the normal zoom level (the user has the ability to zoom in or out a web page: CTRL and +, CTRL and -), the getBoundingClientRect method works differently from version 8 than in earlier versions. The returned coordinates are calculated in the default pixel size in Internet Explorer before version 8 even if the current pixel size in the document is different. From Internet Explorer 8 and in Firefox, Opera, Google Chrome and Safari, the coordinates are calculated in the current pixel size.
For example, if the zoom level is 200%, the getBoundingClientRect method retrieves two times greater values before version 8 than from version 8 for the same element. For further details, please see the examples below.

If you need the exact shape of an element or TextRange object, use the getClientRects method.

Syntax:

object.getBoundingClientRect ( );

You can find the related objects in the Supported by objects section below.

Return value:

Returns a TextRectangle object that represents the bounding rectangle of the current element.

Example HTML code 1:

This example illustrates the use of the getBoundingClientRect method:

<head>
    <script type="text/javascript">
        function GetBox () {
            var div = document.getElementById ("myDiv");

            if (div.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rect = div.getBoundingClientRect ();
                x = rect.left;
                y = rect.top;
                w = rect.right - rect.left;
                h = rect.bottom - rect.top;

                alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div style="height:200px; width:300px; overflow:auto;">
        <div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
            You can get the top-left corner of this element relative to the top left corner of the client area with the button below.<br />
            Use the scrollbars of the container div to test the method for different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetBox ()">Get the placement of the element with red border!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example is the same as the previous one, but it also works in Internet Explorer 7 at non-default zoom levels:

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetBox () {
            var div = document.getElementById ("myDiv");

            if (div.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rect = div.getBoundingClientRect ();
                x = rect.left;
                y = rect.top;
                w = rect.right - rect.left;
                h = rect.bottom - rect.top;

                if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the bounding rectangle include the top and left borders of the client area
                    x -= document.documentElement.clientLeft;
                    y -= document.documentElement.clientTop;

                    var zoomFactor = GetZoomFactor ();
                    if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                        x = Math.round (x / zoomFactor);
                        y = Math.round (y / zoomFactor);
                        w = Math.round (w / zoomFactor);
                        h = Math.round (h / zoomFactor);
                    }
                }
                
                alert (" Left: " + x + "\n Top: " + y + "\n Width: " + w + "\n Height: " + h);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }
    </script>
</head>
<body>
    <div style="height:200px; width:300px; overflow:auto;">
        <div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
            You can get the top-left corner of this element relative to the top left corner of the client area with the button below.<br />
            Use the scrollbars of the container element to test the method for different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetBox ()">Get the placement of the element with red border!</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example is the same as the previous one, but it also works in older Firefox, Opera and Safari versions:

<head>
    <script type="text/javascript">
        function GetOffset (object, offset) {
            if (!object)
                return;
            offset.x += object.offsetLeft;
            offset.y += object.offsetTop;

            GetOffset (object.offsetParent, offset);
        }

        function GetScrolled (object, scrolled) {
            if (!object)
                return;
            scrolled.x += object.scrollLeft;
            scrolled.y += object.scrollTop;

            if (object.tagName.toLowerCase () != "html") {
                GetScrolled (object.parentNode, scrolled);
            }
        }

            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomFactor () {
            var factor = 1;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                factor = Math.round ((physicalW / logicalW) * 100) / 100;
            }
            return factor;
        }

        function GetBox () {
            var div = document.getElementById ("myDiv");

            if (div.getBoundingClientRect) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rect = div.getBoundingClientRect ();
                x = rect.left;
                y = rect.top;
                w = rect.right - rect.left;
                h = rect.bottom - rect.top;

                if (navigator.appName.toLowerCase () == "microsoft internet explorer") {
                    // the bounding rectangle include the top and left borders of the client area
                    x -= document.documentElement.clientLeft;
                    y -= document.documentElement.clientTop;

                    var zoomFactor = GetZoomFactor ();
                    if (zoomFactor != 1) {  // IE 7 at non-default zoom level
                        x = Math.round (x / zoomFactor);
                        y = Math.round (y / zoomFactor);
                        w = Math.round (w / zoomFactor);
                        h = Math.round (h / zoomFactor);
                    }
                }
            }
            else {
                    // older Firefox, Opera and Safari versions
                var offset = {x : 0, y : 0};
                GetOffset (div, offset);

                var scrolled = {x : 0, y : 0};
                GetScrolled (div.parentNode, scrolled);

                x = offset.x - scrolled.x;
                y = offset.y - scrolled.y;
                w = div.offsetWidth;
                h = div.offsetHeight;
            }

            alert ("Left: " + x + "\nTop: " + y + "\nWidth: " + w + "\nHeight: " + h);
        }
    </script>
</head>
<body>
    <div style="height:200px; width:300px; overflow:auto;">
        <div id="myDiv" style="width:250px; height:150px; border:1px solid red;">
            You can get the bounding rectangle of this element 
            relative to the top left corner of the client area with the button below.<br />
            Use the scrollbars to test the placement of the bounding rectangle in different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetBox ();">Get the placement of the element with red border!</button>
</body>