HTMLElement: свойство offsetLeft

Свойство HTMLElement.offsetLeft только для чтения возвращает количество пикселей, на которое верхний левый угол текущего элемента смещен влево внутри узла HTMLElement.offsetParent.

Для элементов блочного типа offsetTop, offsetLeft, offsetWidth, и offsetHeight описывают рамку элемента относительно offsetParent.

Однако для элементов строчного типа (например, span), которые могут переноситься с одной строки на другую, offsetTop и offsetLeft описывают положение первой рамки (используйте Element.getClientRects(), чтобы получить ее ширину и высоту), в то время как offsetWidth и offsetHeight описывают размеры охватывающей рамки (используйте Element.getBoundingClientRect(), чтобы получить ее положение). Поэтому прямоугольник с левой, верхней границами, шириной и высотой offsetLeft, offsetTop, offsetWidth и offsetHeight не будет охватывающим прямоугольником для элемента span с переносимым текстом.

Целое число.

const colorTable = document.getElementById("t1");
const tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // large left offset: do something here
}

Этот пример демонстрирует длинную фразу, которая переносится в пределах div с синей рамкой, и красного прямоугольника, который, как можно подумать, должен описывать границы span.

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

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

<script>
  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";
</script>

• HTMLElement.offsetParent, HTMLElement.offsetTop, HTMLElement.offsetWidth, HTMLElement.offsetHeight