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

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

BoxObject object

Browser support:

Contains information about the position of an element in the document hierarchy, and the position in the current window.

This object is only accessible through the getBoxObjectFor method. The BoxObject object and the getBoxObjectFor method are deprecated in Firefox from version 3 and the support for the getBoxObjectFor method has been removed in Firefox 3.6. Use the TextRectangle object and the getBoundingClientRect method instead.

Syntax:

Methods that return the object:

•	document.getBoxObjectFor (element)

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

Possible members:

Properties:

element

Returns a reference to the element that the BoxObject was created from.

This property is read-only.

height

Returns an integer that specifies the height of the element's rounding box, in pixels.

This property is read-only.

parentBox

Returns a reference to the parent of the element that the BoxObject was created from.

This property is read-only.

screenX

Returns an integer that specifies the left position of the element relative to the screen upper-left corner, in pixels.

This property is read-only.

screenY

Returns an integer that specifies the top position of the element relative to the screen upper-left corner, in pixels.

This property is read-only.

width

Returns an integer that specifies the width of the element's rounding box, in pixels.

This property is read-only.

Returns an integer that specifies the left position of the element relative to the document upper-left corner, in pixels.

This property is read-only.

Returns an integer that specifies the top position of the element relative to the document upper-left corner, in pixels.

This property is read-only.

Example HTML code 1:

This example shows how to use the BoxObject object:

<head>
    <script type="text/javascript">
        function GetBox () {
            if (document.getBoxObjectFor) {
                var div = document.getElementById ("myDiv");
                var box = document.getBoxObjectFor (div);
                alert ("Left: " + box.x + "\nTop: " + box.y + "\nWidth: " + box.width + "\nHeight: " + box.height);
            }
            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 bounding rectangle of this element 
            relative to the top left corner of document, with the button below.<br />
            Scrolling this element has no effect on the position of the bounding rectangle.
        </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>