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>

Output: 

 

Supported Browsers: The browser supported by DOM offsetLeft property are listed below:

  • Google Chrome 1 and above
  • Edge 12 and above
  • Internet Explorer 5.5 and above
  • Firefox 1 and above
  • Opera 8 and above
  • Safari 3 and above
Comment

Explore