HTML | DOM Style left Property

Last Updated : 08 Aug, 2022

The Style left property is used for setting or returning the left position of a positioned element. The Style left property is used for specifying the left position of the elements including padding, scrollbar, border, and margin.

Syntax :

To get the property:

object.style.left

To set the property

object.style.left = "auto|length|%|initial|inherit"

Return Values: It returns a string value, which represents the left position of a positioned element.

Property Values:

auto: This value automatically sets the default left value by the browser.
length: This value sets the left value in the specified length units. This specified length can be positive as well as negative.
%: Percentage value sets the left value in the specified percentage of the parent element’s width.
initial: This value sets the left property to its browser’s default value.
inherit: This value sets the left property to the value from its parent element.

Example: Setting the left position of a <button> element.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>Style left Property Method in HTML</title>
    <style>
        #MyButton {
            position: absolute;
        }
         
        h1 {
            color: green;
        }
         
        h2 {
            font-family: Impact;
        }
         
        body {
            text-align: center;
        }
    </style>
</head>
 
<body onclick="MyEvent(event)">
 
    <h1>GeeksforGeeks</h1>
    <h2>Style left Property Method</h2>
 
    <p>For moving the button to its left, 
      double click the "Move Left" button: </p>
 
    <button type="button" id="MyButton" ondblclick="left()">
        Move Left
    </button>
 
    <script>
        function left() {
 
            /* The left property is defined with length value.
            Similarly other values also can be defined
            for this property. */
 
            document.getElementById("MyButton")
                .style.left = "100px";
        }
    </script>
 
</body>
 
</html>