Open In App

HTML DOM offsetLeft Property

Improve
Improve
Like Article
Like
Save
Share
Report

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


Last Updated : 15 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads