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

You are here: Reference > JavaScript > client-side > box and rectangle > objects > TextRectangle

TextRectangle object

Browser support:

	3	9.5	4

Represents the bounding rectangle of an element or TextRange object.

The TextRectangle object 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.

Syntax:

Methods that return the object:

+	object.getBoundingClientRect ( )
	Related objects: TextRange Related HTML objects: a, abbr, acronym, address, applet, area, b, bdo, big, blink, blockquote, body, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, embed, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, hr, html, i, iframe, img, input:button, input:checkbox, input:file, input:image, input:password, input:radio, input:range, input:reset, input:search, input:submit, input:text, ins, isindex, kbd, keygen, label, legend, li, listing, map, marquee, menu, nobr, noframes, object, ol, optgroup, option, p, plaintext, pre, q, rt, ruby, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, tr, tt, u, ul, var, xmp
•	TextRectangles.item (index)

The base interface, through which you can add new functionalities to the TextRectangle object, is the ClientRect interface.

Possible members:

Properties:

bottom

Returns a floating-point number in Firefox and an integer in other browsers that specifies the bottom position of the rectangle, in pixels.This property is read/write in Internet Explorer, and read-only in other browsers.

height

9	3.5

Returns a floating-point number in Firefox and an integer in other browsers that specifies the height of the rectangle, in pixels.This property is read-only.

left

Returns a floating-point number in Firefox and an integer in other browsers that specifies the left position of the rectangle, in pixels.This property is read/write in Internet Explorer, and read-only in other browsers.

right

Returns a floating-point number in Firefox and an integer in other browsers that specifies the right position of the rectangle, in pixels.This property is read/write in Internet Explorer, and read-only in other browsers.

top

Returns a floating-point number in Firefox and an integer in other browsers that specifies the top position of the rectangle, in pixels.This property is read/write in Internet Explorer, and read-only in other browsers.

width

9	3.5

Returns a floating-point number in Firefox and an integer in other browsers that specifies the width of the rectangle, in pixels.This property is read-only.

Example HTML code 1:

This example illustrates the use of the TextRectangle object:

<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:200px; 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 implements a cross-browser solution for the previous example:

<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);
            }
        }

        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;
            }
            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:200px; 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>