JavaScript offsetLeft
last modified April 2, 2025
In this article, we explore the offsetLeft property in JavaScript.
This property is essential for determining an element's position relative to its
offset parent in the DOM.
Basic Definition
The offsetLeft property returns the number of pixels that the upper
left corner of the current element is offset to the left within its offset
parent. The offset parent is the nearest ancestor element with a positioned
layout.
If no offset parent exists, the property returns the distance from the outer left edge of the element to the inner left edge of the viewport. This property is read-only and returns an integer value.
Basic offsetLeft Example
This example demonstrates how to access the offsetLeft value of a simple div.
<!DOCTYPE html>
<html>
<head>
<title>Basic offsetLeft</title>
<style>
#container {
position: relative;
margin: 50px;
border: 1px solid black;
width: 300px;
height: 200px;
}
#box {
position: absolute;
left: 40px;
top: 30px;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script>
const box = document.getElementById('box');
console.log('offsetLeft:', box.offsetLeft);
</script>
</body>
</html>
In this basic example, we have a container div with relative positioning and a nested box div with absolute positioning. The JavaScript code logs the box's offsetLeft value to the console.
The output will be 40, matching the left CSS property value, because the container is the offset parent. This demonstrates how offsetLeft measures the distance from the offset parent's left edge.
offsetLeft with Different Offset Parents
This example shows how offsetLeft changes with different offset parent scenarios.
<!DOCTYPE html>
<html>
<head>
<title>offsetLeft with Different Parents</title>
<style>
body {
margin: 0;
padding: 20px;
}
#parent1 {
position: relative;
left: 50px;
border: 1px solid red;
padding: 20px;
margin-bottom: 20px;
}
#parent2 {
border: 1px solid blue;
padding: 20px;
}
.child {
width: 100px;
height: 100px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="parent1">
<div class="child" id="child1"></div>
</div>
<div id="parent2">
<div class="child" id="child2"></div>
</div>
<script>
const child1 = document.getElementById('child1');
const child2 = document.getElementById('child2');
console.log('Child1 offsetLeft:', child1.offsetLeft);
console.log('Child2 offsetLeft:', child2.offsetLeft);
</script>
</body>
</html>
Here we have two parent divs with different positioning. The first parent has relative positioning, making it the offset parent for its child. The second parent has static positioning.
The first child's offsetLeft will be 20 (padding), while the second child's offsetLeft will be relative to the viewport since its parent isn't positioned. This shows how offset parent affects offsetLeft values.
Dynamic offsetLeft Changes
This example demonstrates how offsetLeft changes when element position changes.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic offsetLeft</title>
<style>
#container {
position: relative;
width: 400px;
height: 200px;
border: 1px solid black;
}
#movable {
position: absolute;
width: 50px;
height: 50px;
background-color: coral;
left: 20px;
transition: left 0.5s;
}
</style>
</head>
<body>
<div id="container">
<div id="movable"></div>
</div>
<button onclick="moveBox()">Move Box</button>
<p id="positionInfo">Current offsetLeft: 20</p>
<script>
function moveBox() {
const box = document.getElementById('movable');
const info = document.getElementById('positionInfo');
const currentLeft = parseInt(box.style.left) || 20;
const newLeft = currentLeft + 30;
box.style.left = newLeft + 'px';
info.textContent = 'Current offsetLeft: ' + box.offsetLeft;
}
</script>
</body>
</html>
In this example, we have a movable box inside a container. Clicking the button moves the box right by 30 pixels and updates the displayed offsetLeft value.
This demonstrates how offsetLeft dynamically reflects changes to an element's position. The property updates immediately when the element's position changes, making it useful for real-time positioning calculations.
Comparing offsetLeft with Other Position Properties
This example compares offsetLeft with clientLeft and scrollLeft properties.
<!DOCTYPE html>
<html>
<head>
<title>Position Properties Comparison</title>
<style>
#comparison {
position: relative;
width: 300px;
height: 150px;
border: 5px solid black;
padding: 20px;
margin: 50px;
overflow: auto;
}
#content {
width: 500px;
height: 100px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div id="comparison">
<div id="content">Scrollable content to demonstrate differences</div>
</div>
<button onclick="showValues()">Show Values</button>
<div id="output"></div>
<script>
function showValues() {
const element = document.getElementById('comparison');
const output = document.getElementById('output');
output.innerHTML = `
<p>offsetLeft: ${element.offsetLeft}</p>
<p>clientLeft: ${element.clientLeft}</p>
<p>scrollLeft: ${element.scrollLeft}</p>
`;
}
</script>
</body>
</html>
This example creates a scrollable container and compares three different left position properties: offsetLeft, clientLeft, and scrollLeft. Each property measures a different aspect of the element's position.
offsetLeft shows the distance from the offset parent, clientLeft shows the width of the left border, and scrollLeft shows the scrolled horizontal pixels. This helps understand when to use each property.
Practical Use Case: Tooltip Positioning
This example demonstrates a practical use of offsetLeft for tooltip positioning.
<!DOCTYPE html>
<html>
<head>
<title>Tooltip Positioning</title>
<style>
.item {
display: inline-block;
width: 100px;
height: 50px;
margin: 10px;
background-color: lightblue;
text-align: center;
line-height: 50px;
position: relative;
}
.tooltip {
position: absolute;
background-color: black;
color: white;
padding: 5px;
border-radius: 3px;
white-space: nowrap;
top: -30px;
visibility: hidden;
}
</style>
</head>
<body>
<div class="item" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Item 1
<div class="tooltip">This is item 1</div>
</div>
<div class="item" onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Item 2
<div class="tooltip">This is item 2</div>
</div>
<script>
function showTooltip(element) {
const tooltip = element.querySelector('.tooltip');
tooltip.style.left = (element.offsetLeft + element.offsetWidth/2 -
tooltip.offsetWidth/2) + 'px';
tooltip.style.visibility = 'visible';
}
function hideTooltip(element) {
const tooltip = element.querySelector('.tooltip');
tooltip.style.visibility = 'hidden';
}
</script>
</body>
</html>
In this practical example, we use offsetLeft to position tooltips centered above their respective items. The tooltip's left position is calculated based on the item's offsetLeft and width.
This demonstrates how offsetLeft can be used in real-world scenarios to create dynamic, positioned elements. The calculation centers the tooltip by accounting for both the item's position and the tooltip's width.
Source
In this article, we have shown how to use the offsetLeft property
in JavaScript. This property is fundamental for determining element positions
and creating dynamic layouts in web development.
Author
List all JS DOM tutorials.