---
title: HTMLElement.offsetLeft
slug: Web/API/HTMLElement/offsetLeft
translation_of: Web/API/HTMLElement/offsetLeft
---
<div>{{ APIRef("HTML DOM") }}</div>

<p>Свойство <strong>offsetLeft</strong> содержит левое смещение элемента относительно offsetParent. Содержит расстояние от offsetParent до границы элемента.</p>

<p>For block-level elements, <code>offsetTop</code>, <code>offsetLeft</code>, <code>offsetWidth</code>, and <code>offsetHeight</code> describe the border box of an element relative to the <code>offsetParent</code>.</p>

<p>However, for inline-level elements (such as <strong>span</strong>) that can wrap from one line to the next, <code>offsetTop</code> and <code>offsetLeft</code> describe the positions of the <em>first</em> border box (use {{domxref("Element.getClientRects()")}} to get its width and height), while <code>offsetWidth</code> and <code>offsetHeight</code> describe the dimensions of the <em>bounding</em> border box (use {{domxref("Element.getBoundingClientRect()")}} to get its position). Therefore, a box with the left, top, width and height of <code>offsetLeft</code>, <code>offsetTop</code>, <code>offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text.</p>

<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="eval notranslate"><var>left</var> = <var>element</var>.offsetLeft;
</pre>

<p><code><var>left</var></code> is an integer representing the offset to the left in pixels <em>from the closest relatively positioned</em> parent element.</p>

<h2 id="Example" name="Example">Example</h2>

<pre class="brush: js notranslate">var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;

if (tOLeft &gt; 5) {
  // large left offset: do something here
}
</pre>

<p>This example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p>

<p><img alt="Image:offsetLeft.jpg" class="internal" src="/@api/deki/files/790/=OffsetLeft.jpg"></p>

<pre class="brush: html notranslate">&lt;div style="width: 300px; border-color:blue; border-style:solid; border-width:1;"&gt;
  &lt;span&gt;Short span. &lt;/span&gt;
  &lt;span id="longspan"&gt;Long span that wraps within this div.&lt;/span&gt;
&lt;/div&gt;

&lt;div id="box" style="position: absolute; border-color: red; border-width: 1; border-style: solid; z-index: 10"&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
  var box = document.getElementById("box");
  var longspan = document.getElementById("longspan");
  box.style.left = longspan.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = longspan.offsetTop + document.body.scrollTop + "px";
  box.style.width = longspan.offsetWidth + "px";
  box.style.height = longspan.offsetHeight<span style="line-height: normal;"> + "px"</span><span style="line-height: normal;">;
</span><span style="line-height: normal;">&lt;/script&gt; </span></pre>

<h2 id="Specification" name="Specification">Specification</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSSOM View', '#dom-htmlelement-offsetleft', 'offsetLeft')}}</td>
   <td>{{Spec2('CSSOM View')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("api.HTMLElement.offsetLeft")}}</p>

<h2 id="See_also" name="See_also">See also</h2>

<ul>
 <li>{{domxref("HTMLElement.offsetParent")}}, {{domxref("HTMLElement.offsetTop")}}, {{domxref("HTMLElement.offsetWidth")}}, {{domxref("HTMLElement.offsetHeight")}}</li>
</ul>