HTMLImageElement.x — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLImageElement.x

Beschreibung

Die Eigenschaft x von HTMLImageElement kann nur gelesen werden. Sie liefert die horizontale Position der linken Rahmenkante (Border Edge) der ersten Layout-Box des Bildes. Die Position wird relativ zum Ursprung des initialen Containing Blocks gemessen, also zur linken oberen Ecke des Dokuments. Sie bezieht sich nicht auf den sichtbaren Bereich (Viewport). Der Wert ändert sich also nicht, wenn die Seite gescrollt wird.

Nützlich ist das, wenn man schnell die Position eines Bildes im Dokument braucht, etwa um ein Tooltip oder Overlay zu platzieren oder um zu einem Bild zu scrollen. Dazu ist kein Aufruf von getBoundingClientRect() nötig und man muss den Scroll-Versatz nicht selbst umrechnen.

Der Wert ist eine Ganzzahl (IDL-Typ long). CSS-Transformationen wie transform: translate() oder scale() werden nicht berücksichtigt. Wird das Bild nicht dargestellt (z. B. bei display: none oder wenn es nicht im Dokument hängt), gibt die Eigenschaft 0 zurück. Das Gegenstück für die senkrechte Position ist HTMLImageElement.y.

Rückgabewert

Typ

number

Beschreibung

Ganzzahlige x-Koordinate in CSS-Pixeln der linken Rahmenkante relativ zum Ursprung des Dokuments. 0, wenn das Bild keine Layout-Box hat.

Beispiele

Position eines Bildes im Dokument auslesen

const img = document.querySelector('img#logo');

// Erst nach dem Laden sind Größe und Layout sicher bekannt
img.addEventListener('load', () => {
  console.log(`Logo liegt bei x=${img.x}, y=${img.y}`);
});

Logo liegt bei x=24, y=16

Vergleich mit getBoundingClientRect() beim Scrollen

const img = document.querySelector('img');

window.addEventListener('scroll', () => {
  const rect = img.getBoundingClientRect();
  // x ist dokumentbezogen, rect.left ist viewportbezogen
  console.log({
    x: img.x,
    viewportLeft: Math.round(rect.left),
    dokumentLeft: Math.round(rect.left + window.scrollX)
  });
}, { passive: true });

{ x: 120, viewportLeft: -80, dokumentLeft: 120 }

Overlay absolut neben ein Bild setzen

const img = document.querySelector('.produktbild');
const badge = document.createElement('span');
badge.textContent = 'NEU';
badge.className = 'badge';
badge.style.position = 'absolute';

// Absolute Position relativ zum <body> (nicht positioniert)
badge.style.left = `${img.x + img.width - 40}px`;
badge.style.top = `${img.y + 8}px`;
document.body.append(badge);

Nicht gerendertes Bild liefert 0

const img = new Image();
img.src = 'foto.jpg';
console.log(img.x); // nicht im DOM

document.body.append(img);
img.style.display = 'none';
console.log(img.x); // keine Layout-Box

0 0

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie img.x = 100 wird still ignoriert (im Strict Mode gibt es einen TypeError). Die Position setzt man über CSS (left, margin, transform …).
Transformationen werden ignoriert: Ist ein Bild mit transform verschoben oder skaliert, zeigt x die Position ohne Transformation. Die tatsächlich sichtbare Position liefert getBoundingClientRect().
Ganzzahl: Der Wert wird gerundet. Für Positionen mit Subpixel-Genauigkeit nimmt man getBoundingClientRect().
Dokument statt Offset-Parent: Anders als bei offsetLeft ist der Bezug immer der Ursprung des Dokuments, nicht das nächste positionierte Vorfahrenelement.
Layout-Berechnung: Das Lesen kann einen synchronen Reflow auslösen. In Scroll- oder Animationsschleifen sollte man Werte zwischenspeichern und Lese- und Schreibzugriffe nicht abwechseln.
Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). Die Eigenschaft gibt es nur bei HTMLImageElement, nicht bei allgemeinen Elementen.

Siehe auch

HTMLImageElement.alt HTMLImageElement.y HTMLImageElement.src HTMLImageElement.name HTMLImageElement.align