MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Element.offsetLeft

Summary

Returns the number of pixels that the upper left corner of the current element is offset to the left within the offsetParent node.

構文

left = element.offsetLeft;

left is an integer representing the offset to the left in pixels.

Note

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.)

Example

var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;
 
if (tOLeft > 5) {
  // large left offset: do something here
}

Example

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.

Image:offsetLeft.jpg

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> 

See also

offsetParent, offsetTop, offsetWidth, offsetHeight

仕様

DOM Level 0。どの標準にも属しません。

MSDN: offsetLeft Property

ドキュメントのタグと貢献者

 このページの貢献者: fscholz, khalid32, Okome
 最終更新者: khalid32,