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

You are here: Reference > JavaScript > client-side > box and rectangle > methods > getBoxObjectFor (document)

getBoxObjectFor method (document)

Browser support:


	3.6

Returns a BoxObject object that represents the bounding rectangle of the specified element in pixels, relative to the upper-left corner of the document.

Note: The support for the getBoxObjectFor method has been removed in Firefox 3.6. Use the getBoundingClientRect method instead.

Syntax:

object.getBoxObjectFor (element);

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

Parameters:

element

Required. Reference to an element whose bounding rectangle needs to be returned.

Return value:

Returns the BoxObject object created from the coordinates.

Example HTML code 1:

This example illustrates the use of the getBoxObjectFor method:

<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>