Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to set the left position of a positioned element with JavaScript?
To set the left position of a positioned element in JavaScript, use the style.left property. This property works on elements that have a CSS position value of absolute, relative, or fixed.
Syntax
element.style.left = "value";
The value can be specified in pixels (px), percentages (%), or other CSS units like em, rem, etc.
Example
Here's how to change the left position of a button when clicked:
<!DOCTYPE html>
<html>
<head>
<style>
#myButton {
position: absolute;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Left Position Demo</h1>
<p>Click the button to move it to the right.</p>
<button type="button" id="myButton" onclick="moveButton()">Move Me Right</button>
<script>
function moveButton() {
document.getElementById("myButton").style.left = "200px";
}
</script>
</body>
</html>
Multiple Position Changes
You can create dynamic animations or multiple position changes:
<!DOCTYPE html>
<html>
<head>
<style>
#animatedBox {
position: absolute;
width: 50px;
height: 50px;
background-color: #ff6b6b;
left: 10px;
top: 100px;
}
</style>
</head>
<body>
<h1>Animation Demo</h1>
<button onclick="moveLeft()">Move Left</button>
<button onclick="moveRight()">Move Right</button>
<button onclick="resetPosition()">Reset</button>
<div id="animatedBox"></div>
<script>
function moveLeft() {
document.getElementById("animatedBox").style.left = "50px";
}
function moveRight() {
document.getElementById("animatedBox").style.left = "300px";
}
function resetPosition() {
document.getElementById("animatedBox").style.left = "10px";
}
</script>
</body>
</html>
Key Points
- The element must have a CSS position property set to
absolute,relative, orfixed - Values can be in pixels (px), percentages (%), or other CSS units
- Negative values move the element to the left of its normal position
- Use
parseInt()orparseFloat()to get numeric values from the left property
Getting Current Left Position
To retrieve the current left position value:
<script>
// Get the left position
let currentLeft = document.getElementById("myElement").style.left;
console.log("Current left position: " + currentLeft);
// Convert to number for calculations
let leftValue = parseInt(currentLeft);
console.log("Numeric value: " + leftValue);
</script>
Conclusion
Use the style.left property to dynamically position elements in JavaScript. Remember that the element must have a CSS position property set for this to work effectively.
Updated on: 2026-03-15T23:18:59+05:30
1K+ Views
Advertisements