HTMLObjectElement.width — Eigenschaft · JavaScript-Referenz

Signatur

HTMLObjectElement.width

Beschreibung

Die Eigenschaft width des Interfaces HTMLObjectElement spiegelt das HTML-Attribut width eines <object>-Elements wider. Sie gibt einen String zurück, keine Zahl. Der Wert steht für die gewünschte Anzeigebreite der eingebetteten Ressource, etwa eines PDFs, einer SVG-Grafik oder eines anderen HTML-Dokuments, in CSS-Pixeln.

Wenn du die Eigenschaft setzt, schreibt der Browser den Wert direkt ins Attribut, so als hättest du setAttribute('width', wert) aufgerufen. Fehlt das Attribut, ist der Rückgabewert ein leerer String "". Der Browser prüft oder normalisiert den Wert dabei nicht: Er wird genau so gespeichert, wie du ihn übergibst.

Nützlich ist die Eigenschaft, wenn du die Größe eingebetteter Inhalte per Skript anpassen willst, zum Beispiel für eine PDF-Vorschau in einem Dialog. Für reaktionsfähige Layouts ist CSS (style.width, max-width, aspect-ratio) meist die bessere Wahl. Eine CSS-Breite überschreibt das Attribut, weil Attribute nur als Darstellungshinweise mit geringer Priorität gelten.

Parameter

Name	Typ	Default	Beschreibung
$wert	string		Beim Setzen: neue Breite als String, z. B. `"640"`. Zahlen werden automatisch in einen String umgewandelt. Gültig im HTML-Sinn sind nur nicht-negative Ganzzahlen ohne Einheit.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs width, oder "", wenn das Attribut fehlt.

Beispiele

Breite auslesen und in eine Zahl umwandeln

// HTML: <object id="doc" data="handbuch.pdf" type="application/pdf" width="800" height="600"></object>
const obj = document.getElementById('doc');

console.log(obj.width);          // String
console.log(typeof obj.width);

const breite = Number.parseInt(obj.width, 10) || 0;
console.log(breite + 100);

800 string 900

PDF-Vorschau dynamisch erzeugen und Breite setzen

const zeigePdf = (url, breite = 640, hoehe = 480) => {
  const obj = document.createElement('object');
  obj.data = url;
  obj.type = 'application/pdf';
  obj.width = String(breite);   // spiegelt ins Attribut
  obj.height = String(hoehe);
  obj.textContent = 'Ihr Browser kann keine PDFs anzeigen.';
  document.body.append(obj);
  return obj;
};

const vorschau = zeigePdf('rechnung.pdf', 720);
console.log(vorschau.getAttribute('width'));

720

Breite an den Container anpassen

const obj = document.querySelector('object.grafik');
const container = obj.parentElement;

const anpassen = () => {
  // Attribut erwartet ganze CSS-Pixel ohne Einheit
  obj.width = String(Math.floor(container.clientWidth));
};

new ResizeObserver(anpassen).observe(container);
anpassen();

Fehlendes Attribut erkennen

const obj = document.createElement('object');
console.log(JSON.stringify(obj.width));
console.log(obj.hasAttribute('width'));

obj.width = 300;               // Zahl wird zum String
console.log(JSON.stringify(obj.width));

"" false "300"

// Wichtig · Fallstricke

Rückgabe als String: obj.width + 10 ergibt "80010" statt 810. Wandle den Wert vorher mit Number.parseInt() oder Number() um.
Keine Validierung: Werte wie "50%" oder "20em" landen unverändert im Attribut. Laut HTML-Standard sind aber nur Pixelwerte ohne Einheit gültig, und Prozentangaben verhalten sich in den Browsern unterschiedlich. Für relative Größen besser CSS verwenden.
CSS hat Vorrang: Setzt ein Stylesheet oder style.width eine Breite, bleibt die Änderung von width ohne sichtbare Wirkung.
Gerenderte Breite: Die tatsächlich angezeigte Breite liefern offsetWidth, clientWidth oder getBoundingClientRect().width, nicht diese Eigenschaft.
Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt. Ob Plugin-Inhalte oder PDFs überhaupt angezeigt werden, hängt allerdings vom Browser ab, vor allem auf Mobilgeräten.

Siehe auch

HTMLObjectElement.contentWindow HTMLObjectElement.data HTMLObjectElement.form HTMLObjectElement.height HTMLObjectElement.name