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
Please Login to comment...