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 :
object.style.left
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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Aug, 2022
Like Article
Save Article