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

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

offsetLeft property

Browser support:

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

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

If you need the left position of the object including only the padding, use the clientLeft and the offsetLeft properties together.
To set or retrieve the number of pixels by which the contents of an object are scrolled horizontally, use the scrollLeft property.
If you need the left position of the browser window, use the screenX or screenLeft property.

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

If you need the width of an element, you can use the clientWidth, offsetWidth and scrollWidth properties and the getBoundingClientRect method.

offsetTop 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.offsetLeft;

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

This property is read-only.

Possible values:

Integer that returns the left 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>