HTML DOM offsetLeft Property

Last Updated : 19 Aug, 2026

The DOM offsetLeft property is used to return the left position in pixels. This position is relative to the left side of the offsetParent element. 

Syntax

element.offsetLeft

Return Value: It returns the number representing the left position of the element in pixels. 

Example: In this example, we will see the use of the DOM offsetLeft property.

HTML 
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
  
<head>
    <title>
        DOM offsetLeft Property
    </title>

    <style>
        #GFG {
            height: 50px;
            width: 200px;
            padding: 10px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h2>
        DOM Style offsetLeft Property
    </h2>
    <div id="GFG">
        <b>Information about this div:</b><br>
        <p id="demo"></p>
    </div><br>
<!--Driver Code Ends-->

    <button type="button" onclick="geeks()">
        Submit
    </button>
    <script>
        function geeks() {
            let testDiv = document.getElementById("GFG");
            document.getElementById("demo").innerHTML
                = "offsetLeft: " + testDiv.offsetLeft;
        }
    </script>

<!--Driver Code Starts-->
</body>
  
</html>
<!--Driver Code Ends-->
  • It measures relative to the offsetParent (not the viewport or document), and the offsetParent is the nearest ancestor with a non-static position (or the <body>/<html> in some cases). This makes it different from getBoundingClientRect().left (which is viewport-relative) or scrollLeft.
  • For block-level elements it describes the border box; for wrapping inline elements it only reports the position of the first line box.
Comment

Explore