Свойство offsetLeft содержит левое смещение элемента относительно offsetParent (относительно родительского элемента у которого css-свойство position не равно static).

Содержит расстояние от offsetParent до границы элемента (то есть без учета margin).

См. также offsetParent, offsetTop, offsetHeight, offsetWidth, clientWidth, clientHeight.

Синтаксис

элемент.offsetLeft

Примеры

Пример

Если у родительских элементов нет позиционирования то offsetLeft - левое смещение элемента относительно body:

<div>
	<div id="elem" style="position:absolute; left:100px"></div>
</div>
var elem = document.getElementById('elem');
document.write(elem.offsetLeft);

Результат выполнения кода:

100

Пример

Но если есть родительский элемент со свойство position отличными от static:

<div style="position:relative; left:500px">
	<div id="elem" style="position:absolute; left:100px"></div>
</div>
var elem = document.getElementById('elem');
document.write(elem.offsetLeft);

Результат выполнения кода:

100

В этом примере у элемента с id равным elem левое смещение относительно body - 600px, но относительно offsetParent - 100px;

Пример

Свойство offsetLeft (как и все остальные метрики) не учитывает отступы margin (так как это не часть элемента). Но в css отступы это часть элемента. Поэтому:

<div style="position:relative; left:500px">
	<div id="elem" style="position:absolute; left:100px; margin:50px"></div>
</div>
var elem = document.getElementById('elem');
document.write(elem.offsetLeft);

Результат выполнения кода:

150