HTML DOM offsetLeft Property

HTML DOM previousElementSibling Property

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="Beginner()">
        Submit
    </button>
   
    <script>
        function Beginner() {
            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

Tags:

#HTML-DOM #Web technologies #HTML #Web Technologies

HTML DOM specified Property

HTML DOM previousElementSibling Property

HTML DOM offsetLeft Property

HTML

Contact Us