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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > offsetTop

offsetTop property

Browser support:

Returns the top position of the object relative to the top side of its offsetParent element, in pixels.

The returned value is the top position of the object including the padding, scrollBar, and the border, but excluding the margin.

If you need the top position of the object including only the padding, use the clientTop and the offsetTop properties together.
To set or retrieve the number of pixels by which the contents of an object are scrolled vertically, use the scrollTop property.
If you need the top position of the browser window, use the screenY or screenTop property.

You can set the top position of an element with the top, pixelTop and posTop style properties. In that case, the value specifies the top position of the object including the padding, scrollBar, border and the margin. You can get the value of the top style property in different units with these properties, not the top position of the rendered element.

If you need the height of an element, you can use the clientHeight, offsetHeight and scrollHeight properties and the getBoundingClientRect method.
To get the left position of an object, use the offsetLeft property.

The offsetLeft and offsetTop properties of the TextRange object are different from the other offsetLeft and offsetTop properties. These properties return the start position of the contents of the TextRange object, in pixels. The returned coordinates are relative to the top-left corner of the browser window's client area. See Example 2 for details.

Syntax:

object.offsetTop;

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

This property is read-only.

Possible values:

Integer that returns the top position, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example retrieves the position of an element, relative to the top-left corner of the browser's client area, with the offsetLeft, offsetTop, scrollLeft and scrollTop properties. See the page for the getBoundingClientRect method for similar functionality.

<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 GetTopLeft () {
            var div = document.getElementById ("myDiv");

            var offset = {x : 0, y : 0};
            GetOffset (div, offset);

            var scrolled = {x : 0, y : 0};
            GetScrolled (div.parentNode, scrolled);

            var posX = offset.x - scrolled.x;
            var posY = offset.y - scrolled.y;
            alert ("The top-left corner of the div relative to the top-left corner of the browser's client area: \n" 
                    + " horizontal: " + posX + "px\n vertical: " +  posY + "px");
        }
    </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 to test it for different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetTopLeft ();">Get the position 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 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>