Skip to content
Related Articles

Related Articles

HTML | DOM offsetLeft Property

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Easy
  • Last Updated : 16 Jun, 2022

The DOM offsetLeft property is used to returns 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: 

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() {
                var testDiv = document.getElementById("GFG");
 
                document.getElementById("demo").innerHTML
                    = "offsetLeft: "+ testDiv.offsetLeft;
            }
        </script>
    </body>
</html>                   

Output: Before Click on the button: 

 

After Click on the button:

  

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!