HTML DOM offsetLeft Property

Last Updated : 15 Jun, 2023

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

<!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>
    <button type="button" onclick="geeks()">
        Submit
    </button>
   
    <script>
        function geeks() {
            let testDiv = document.getElementById("GFG");
            document.getElementById("demo").innerHTML
                = "offsetLeft: " + testDiv.offsetLeft;
        }
    </script>
</body>
   
</html>