Aquileo | HTML | DOM Style left Property

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>

Output:

Before clicking the button:

After clicking the button:

Supported Browsers: The browser supported by HTML | DOM Style left Property are listed below:

Google Chrome 1
Edge 12
Internet Explorer 5.5
Firefox 1
Apple Safari 1
Opera 5

HTML | DOM Style left Property

Explore