HTMLElement.offsetLeft — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLElement.offsetLeft

Beschreibung

offsetLeft ist eine schreibgeschützte Eigenschaft von HTMLElement. Sie gibt an, wie viele Pixel die linke Rahmenkante (border edge) des Elements von der linken Innenkante (padding edge) seines offsetParent entfernt ist. Der offsetParent ist das nächste positionierte Vorfahrenelement (position ungleich static), alternativ ein td, th, table oder das body-Element.

Die Eigenschaft eignet sich für einfache Layout-Berechnungen, z. B. um Tooltips oder Dropdowns neben einem Element zu platzieren, Karussell-Positionen zu bestimmen oder die Position eines Elements innerhalb eines scrollbaren Containers zu ermitteln. Zusammen mit offsetTop, offsetWidth und offsetHeight beschreibt sie die Box des Elements relativ zum offsetParent.

Wichtig: Der Wert ist auf ganze Zahlen gerundet und berücksichtigt keine CSS-Transformationen (transform) und keine Scroll-Position des Dokuments. Für präzise, viewport-relative Koordinaten ist Element.getBoundingClientRect() meist die bessere Wahl.

Bei Inline-Elementen, die über mehrere Zeilen umbrechen, bezieht sich offsetLeft auf die Position der ersten Zeilenbox. Ist das Element oder ein Vorfahre per display: none ausgeblendet, liefert die Eigenschaft 0.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger Pixelwert (kann negativ sein) des Abstands der linken Rahmenkante zur linken Innenkante des offsetParent. 0, wenn das Element nicht gerendert wird.

Beispiele

Position relativ zum positionierten Container auslesen

// HTML: <div id="box" style="position:relative; padding:20px">
//         <span id="ziel" style="margin-left:30px">Ziel</span>
//       </div>
const ziel = document.querySelector('#ziel');

console.log(ziel.offsetParent.id); // Bezugselement
console.log(ziel.offsetLeft);      // Padding 20 + Margin 30

box 50

Tooltip rechts neben einem Button platzieren

// Button und Tooltip teilen sich einen Container mit position: relative
const button = document.querySelector('#hilfe');
const tooltip = document.querySelector('#tooltip');

const zeigeTooltip = () => {
  tooltip.style.position = 'absolute';
  tooltip.style.left = `${button.offsetLeft + button.offsetWidth + 8}px`;
  tooltip.style.top = `${button.offsetTop}px`;
  tooltip.hidden = false;
};

button.addEventListener('mouseenter', zeigeTooltip);
button.addEventListener('mouseleave', () => { tooltip.hidden = true; });

Aktives Element in horizontaler Leiste zentriert scrollen

const leiste = document.querySelector('.tabs'); // overflow-x: auto; position: relative
const aktiv = leiste.querySelector('.tab.aktiv');

const ziel = aktiv.offsetLeft - (leiste.clientWidth - aktiv.offsetWidth) / 2;
leiste.scrollTo({ left: ziel, behavior: 'smooth' });

Absolute Dokument-Position durch Aufsummieren

const absoluteLeft = (el) => {
  let x = 0;
  for (let node = el; node; node = node.offsetParent) {
    x += node.offsetLeft;
  }
  return x;
};

const el = document.querySelector('#ziel');
console.log(absoluteLeft(el));
// Präziser und inkl. Transformationen:
console.log(el.getBoundingClientRect().left + window.scrollX);

// Wichtig · Fallstricke

Rundung: Der Wert wird auf ganze Pixel gerundet. Für Subpixel-Genauigkeit getBoundingClientRect() verwenden.
Transformationen ignoriert: transform: translateX(…) oder scale() wirken sich nicht auf offsetLeft aus.
Bezugselement beachten: Der Wert ist relativ zum offsetParent, nicht zum direkten Elternelement oder zum Viewport. Ohne positionierten Vorfahren ist das meist body.
Ausgeblendete Elemente: Bei display: none (auch bei Vorfahren) oder position: fixed ist offsetParent null; offsetLeft liefert dann 0 bzw. den Abstand zum Viewport.
Performance: Das Lesen erzwingt ein synchrones Layout (Reflow). Lese- und Schreibzugriffe auf das DOM in Schleifen nicht abwechseln, sonst droht Layout-Thrashing.
Schreibgeschützt: Eine Zuweisung wird still ignoriert (im Strict Mode kein Fehler, da nur Getter). Zum Verschieben style.left oder transform nutzen.
Nur auf HTMLElement verfügbar, nicht auf SVG-Elementen. Unterstützt von allen gängigen Browsern.

Siehe auch

HTMLElement.offsetTop HTMLElement.offsetParent HTMLElement.offsetWidth HTMLElement.offsetHeight Element.getBoundingClientRect() Element.scrollLeft Element.clientLeft