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"
  • 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.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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

    I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




    Article Tags :
    Practice Tags :


    Be the First to upvote.


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.