Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Style left Property
  • Last Updated : 01 Aug, 2019

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"

    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.




    <!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
    • Internet Explorer
    • Firefox
    • Apple Safari
    • Opera



    My Personal Notes arrow_drop_up
  • Recommended Articles
    Page :