Signatur
Beschreibung
Die Eigenschaft border von HTMLImageElement spiegelt das Inhaltsattribut border des <img>-Elements wider. Sie liefert und setzt einen String, der die Rahmenbreite in Pixeln angibt. Früher wurde sie vor allem gebraucht, um den blauen Rahmen um verlinkte Bilder (<a><img></a>) mit border="0" auszuschalten.
Seit HTML5 gilt das Attribut als obsolet. Die Browser werten es aber weiter als Darstellungshinweis aus: Ein Wert ungleich null ergibt einen durchgezogenen Rahmen in dieser Breite (border-width plus border-style: solid). Die Werte "" und "0" ergeben keinen Rahmen.
In neuem Code solltest du immer CSS nehmen, also img.style.border oder, besser noch, eine CSS-Klasse. Die Eigenschaft ist heute vor allem wichtig, wenn du Altbestände auslesen, migrieren oder bereinigen willst.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | string | "" | Beim Setzen: Rahmenbreite in Pixeln als String, z. B. "2". Zahlen werden in Strings umgewandelt. Der Wert landet unverändert im Attribut border. |
Rückgabewert
border. Fehlt das Attribut, ist es ein leerer String "".Beispiele
Wert lesen und setzen
const img = document.createElement('img');
img.src = 'logo.png';
console.log(JSON.stringify(img.border)); // Attribut fehlt
img.border = 3;
console.log(img.border, typeof img.border);
console.log(img.getAttribute('border'));Altbestand auf CSS umstellen
// Veraltete border-Attribute in Inline-CSS umwandeln und danach entfernen
document.querySelectorAll('img[border]').forEach((img) => {
const px = parseInt(img.border, 10);
img.style.border = Number.isFinite(px) && px > 0 ? `${px}px solid` : 'none';
img.removeAttribute('border');
});
console.log(document.querySelectorAll('img[border]').length);Moderne Alternative: Rahmen per CSS-Klasse
// Statt img.border = '2' lieber eine Klasse setzen
const style = document.createElement('style');
style.textContent = '.bild-rahmen { border: 2px solid #333; }';
document.head.append(style);
const img = document.querySelector('img') ?? document.body.appendChild(new Image());
img.classList.add('bild-rahmen');
console.log(getComputedStyle(img).borderTopWidth);// Wichtig · Fallstricke
- Veraltet: Das Attribut ist in HTML5 obsolet und macht das Dokument ungültig, auch wenn es noch dargestellt wird. Nimm stattdessen CSS (
border,border-width). - Typ ist ein String:
img.border = 2gibt beim Lesen"2"zurück. Vor Rechnungen deshalb mitparseInt()umwandeln. - Keine Prüfung: Ungültige Werte wie
"abc"werden ohne Fehler ins Attribut geschrieben. Die Darstellung hängt dann davon ab, wie der Browser den Wert auswertet. - Nicht der berechnete Stil: Die Eigenschaft liest nur das Attribut aus. CSS-Regeln, die den Rahmen überschreiben, erscheinen hier nicht. Den tatsächlichen Rahmen bekommst du über
getComputedStyle(img).borderWidth. - Kompatibilität: Alle gängigen Browser unterstützen die Eigenschaft aus Gründen der Abwärtskompatibilität. Ob sie irgendwann entfernt wird, ist nicht angekündigt.