HTMLElement: offsetLeft property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨July 2015⁩.

TheoffsetLeft read-only property of theHTMLElement interface returns the number of pixels that theupper left corner of the current element is offset to the left within theHTMLElement.offsetParent node.

For block-level elements,offsetTop,offsetLeft,offsetWidth, andoffsetHeight describe the border box of an element relative to theoffsetParent.

However, for inline-level elements (such as<span>) that can wrap from one line to the next,offsetTop andoffsetLeft describe the positions of thefirst border box (useElement.getClientRects() to get its width and height), whileoffsetWidth andoffsetHeight describe the dimensions of thebounding border box (useElement.getBoundingClientRect() to get its position). Therefore, a box with the left, top, width and height ofoffsetLeft,offsetTop,offsetWidth andoffsetHeight will not be a bounding box for a span with wrapped text.

Value

An integer.

Examples

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

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.

A sentence that reads: Short span. This text is completely within a div with a blue border. A sentence that reads: Long span that wraps within this div. The words "long span that wraps" is within a box with a red border. The words "within this div" are within the div with the blue border.

html

<div>  <span>Short span.</span>  <span>Long span that wraps within this div.</span></div><div></div>

css

.span-container {  width: 300px;  border-color: blue;  border-style: solid;  border-width: 1px;}#box {  position: absolute;  border-color: red;  border-width: 1px;  border-style: solid;  z-index: 10;}

const box = document.getElementById("box");const longSpan = document.getElementById("long-span");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}px`;