HTMLImageElement.hspace — Eigenschaft · JavaScript-Referenz

Signatur

HTMLImageElement.hspace

Beschreibung

Die Eigenschaft hspace des Interfaces HTMLImageElement spiegelt das veraltete HTML-Attribut hspace des <img>-Elements wider. Sie ist eine vorzeichenlose Ganzzahl und gibt an, wie viele Pixel links und rechts neben dem Bild frei bleiben sollen. Das war vor allem bei Bildern gedacht, die mit align="left" oder align="right" vom Text umflossen werden.

Den Wert zu lesen oder zu setzen, liest bzw. schreibt direkt das Attribut hspace. Browser übersetzen das Attribut intern in die CSS-Eigenschaften margin-left und margin-right. Diese Präsentationshinweise haben die niedrigste Priorität: Jede CSS-Regel, die margin setzt, überschreibt sie.

In neuem Code solltest du hspace nicht verwenden. Nimm stattdessen CSS, etwa margin-inline: 10px oder element.style.marginInline. Die Eigenschaft ist heute vor allem wichtig, wenn du alten Code pflegst oder bestehendes Markup ausliest bzw. umwandelt.

Rückgabewert

Typ

number

Beschreibung

Eine vorzeichenlose Ganzzahl mit dem horizontalen Abstand in Pixeln. Fehlt das Attribut oder ist es ungültig, ist der Wert 0.

Beispiele

hspace auslesen und setzen

const img = document.createElement('img');
img.src = 'logo.png';
console.log(img.hspace); // Attribut fehlt

img.hspace = 12;
console.log(img.hspace);
console.log(img.getAttribute('hspace'));
document.body.append(img);

0 12 "12"

Altes Markup auf CSS-Margins umstellen

// Alle Bilder mit hspace-Attribut auf moderne CSS-Margins umstellen
const migrateHspace = () => {
  document.querySelectorAll('img[hspace]').forEach((img) => {
    const px = img.hspace;
    img.style.marginInline = `${px}px`;
    img.removeAttribute('hspace');
  });
};

migrateHspace();
console.log(document.querySelectorAll('img[hspace]').length);

CSS hat Vorrang vor hspace

const img = document.createElement('img');
img.hspace = 20;
img.style.marginLeft = '4px';
document.body.append(img);

const cs = getComputedStyle(img);
console.log(cs.marginLeft, cs.marginRight);

4px 20px

// Wichtig · Fallstricke

Veraltet: hspace ist in HTML5 nicht mehr zulässig und fällt bei der Validierung durch. Nutze stattdessen CSS (margin-left/margin-right oder margin-inline).
Niedrige Priorität: Der Wert wirkt nur als Präsentationshinweis. Jede CSS-Regel für margin, auch aus einem Reset-Stylesheet, überschreibt ihn.
Negative Werte oder Zeichenketten, die keine Zahlen sind, werden beim Lesen zu 0. Werte über 2147483647 werden ebenfalls als ungültig behandelt.
Kompatibilität: Die Eigenschaft wird aus Gründen der Rückwärtskompatibilität von allen gängigen Browsern (Chrome, Firefox, Safari, Edge) weiterhin unterstützt. Verlass dich aber nicht darauf, dass das dauerhaft so bleibt.
Das Gegenstück für den vertikalen Abstand ist vspace.

Siehe auch

HTMLImageElement HTMLImageElement.vspace HTMLImageElement.align HTMLImageElement.border HTMLElement.style getComputedStyle() HTMLImageElement.fetchPriority