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

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

getClientRects method

Browser support:

	3	9.5	4

Retrieves a TextRectangles collection that specifies the exact shape of the current element or TextRange object.

The getClientRects method 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.

The returned TextRectangles collection contains TextRectangle objects. Each TextRectangle object specifies the bounding rectangle of a single line in pixels, relative to the upper-left corner of the browser's client area. The bounding rectangle includes the padding, scrollbar, and the border, but excludes the margin. The coordinates of the bounding rectangle include the top and left borders of the client area.

Note:

Since the shape of a block element is always rectangular, the returned TextRectangles collection contains only one TextRectangle object for block elements in Firefox, Opera, Google Chrome and Safari. This TextRectangle object specifies the bounding rectangle of the block element.
When the width of a block element is specified, the returned TextRectangles collection contains only one TextRectangle object in Internet Explorer.

See Example 2 and 3 for details.

Note: sometimes a single line is represented by more than one TextRectangle object in Internet Explorer. Example 1 illustrates it.

Be careful about the getClientRects method!
In Internet Explorer earlier than version 8, the returned TextRectangles collection 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 getClientRects 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 getClientRects method retrieves two times greater values before version 8 than from version 8 for the same element. For further details, please see the examples of the getBoundingClientRect method.

If you need the bounding rectangle of the entire element, use the getBoundingClientRect method.

Syntax:

object.getClientRects ( );

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

Return value:

Returns a TextRectangles collection that specifies the exact shape.

Example HTML code 1:

This example illustrates the use of the getClientRects method for an inline element:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <span id="shapeTest">
        You can see the exact shape of this element in the green field below.<br />
        This line is represented by two TextRectangle object in Internet Explorer.
    </span>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the getClientRects method for a block element:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <div id="shapeTest">
        You can see the exact shape of this element in the green field below.<br />
        The TextRectangles collection, returned by the getClientRects method, 
        contains only one TextRectangle object in Firefox, Opera, Google Chrome and Safari.<br />
        This object represents the bounding rectangle of the entire element.
    </div>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the getClientRects method for a block element with specified width:

<head>
    <script type="text/javascript">
        function GetShape () {
            var shapeTestObj = document.getElementById ("shapeTest");
            var message = "";
            if (shapeTestObj.getClientRects) {        // Internet Explorer, Firefox 3+, Google Chrome, Opera 9.5+, Safari 4+
                var rects = shapeTestObj.getClientRects ();
                for (i = 0; i < rects.length; i++) {
                    var rect = rects[i];
                    message += "top: " + rect.top + 
                               ", bottom: " + rect.bottom + 
                               ", left: " + rect.left + 
                               ", right: " + rect.right + "<br />";
                }
            }
            else {
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetShape ()">
    <div id="shapeTest" style="width:450px">
        You can see the exact shape of this element in the green field below.<br />
        The TextRectangles collection, returned by the getClientRects method, 
        contains only one TextRectangle object.<br />
        This object represents the bounding rectangle of the entire element.
    </div>
    <br /><br /><br />
    <div id="info" style="background-color:#c0e0b0;"></div>
</body>