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

You are here: Reference > JavaScript > client-side > selection and ranges > properties > boundingTop (TextRange)

boundingTop property (TextRange)

Browser support:

Returns an integer value that specifies the top coordinate of the rectangle that bounds the current TextRange object, in pixels.

The boundingLeft, boundingTop, boundingWidth and boundingHeight properties retrieve the bounding rectangle of a TextRange object.

If you need the exact shape of a TextRange object, use the getClientRects method. It retrieves a TextRectangles collection that contains TextRectangle objects. Every TextRectangle object represents a line of text that belongs to the TextRange object.

All coordinates mentioned above are relative to the top-left corner of the browser window's client area.

Syntax:

object.boundingTop;

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

This property is read-only.

Possible values:

Integer that corresponds to the top coordinate of the bounding rectangle.

Default: this property has no default value.

Example HTML code 1:

This example retrieves the placement of the selected content in Internet Explorer:

<head>
    <script type="text/javascript">
        function Init () {
            UpdateInfo ();
            if (document.attachEvent) {     // Internet Explorer
                document.attachEvent ("onselectionchange", UpdateInfo);
            }
            else {
                alert ("Your browser does not support this example!");
            }
        }

        function UpdateInfo () {
            var info = document.getElementById ("info");

            if (document.selection === undefined) {
                info.innerHTML = "Your browser does not support this example!";
                return;
            }

            if (document.selection.type == "None") {
                info.innerHTML = "No content is selected, or the selected content is not available!";
            }
            else {
                var textRange = document.selection.createRange ();
                
                var message = "The start point of the selection, relative to the top-left corner of the browser's client area:<br />";
                message += "left: " + textRange.offsetLeft + "<br />";
                message += "top: " + textRange.offsetTop + "<br />";

                message += "<br />The bounding rectangle of the selection, relative to the top-left corner of the browser's client area:<br />";
                message += "left: " + textRange.boundingLeft + "<br />";
                message += "top: " + textRange.boundingTop + "<br />";
                message += "width: " + textRange.boundingWidth + "<br />";
                message += "height: " + textRange.boundingHeight + "<br />";

                info.innerHTML = message;
            }
        }
    </script>
</head>
<body onload="Init ();">
    <div onscroll="UpdateInfo ();" style="padding:100px; height:100px; width:400px; overflow:scroll;">
        <nobr>Select some content within this field.</nobr>
        <nobr>The coordinates of the selected content's boundary rectangle</nobr>
        <nobr>are visible in the field below</nobr>
    </div>
    <br /><br />
    <div id="info" style="background-color:#e0c0a0;"></div>
</body>