Skip to content
Related Articles

Related Articles

HTML | DOM Style left Property

Improve Article
Save Article
  • Last Updated : 08 Aug, 2022
Improve Article
Save Article

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!