element.offsetLeft

Podsumowanie

Zwraca ilość pikseli, jaką dzieli górny lewy róg bieżącego elementu od lewej strony wewnątrz węzła offsetParent.

Składnia

left =element.offsetLeft;

left jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.

Uwaga

offsetLeft returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as span) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The offsetLeft will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of offsetLeft, offsetTop, offsetWidth and offsetHeight will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)

Przykład

var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;
 
if (tOLeft > 5) {
  // duże lewe przesunięcie: zrób coś tutaj
}

Przykład

Per the note above, 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.

Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.

<div style="width: 300px; border-color:blue;
  border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">Long span that wraps withing this div.</span>
</div>

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

<script>
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft;
  box.style.top = long.offsetTop + document.body.scrollTop;
  box.style.width = long.offsetWidth;
  box.style.height = long.offsetHeight;
</script> 

Zobacz także

offsetParent, offsetTop, offsetWidth, offsetHeight

Specyfikacja

Niestandardowa własność.

MSDN: offsetLeft