HTMLSourceElement: width-Eigenschaft

Die width-Eigenschaft des HTMLSourceElement Interface ist eine nicht-negative Zahl, die die Breite der Bildressource in CSS-Pixel angibt.

Die Eigenschaft hat nur dann eine Wirkung, wenn das übergeordnete Element des aktuellen <source>-Elements ein <picture>-Element ist.

Sie spiegelt das width-Attribut des <source>-Elements wider.

In diesem Artikel

Wert

Eine nicht-negative Zahl, die die Breite der Bildressource in CSS-Pixel angibt.

Beispiele

html
<picture id="img">
  <source
    srcset="landscape.png"
    media="(width >= 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(width >= 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(width >= 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>

js
const img = document.getElementById("img");
const sources = img.querySelectorAll("source");
console.log(Array.from(sources).map((el) => el.width)); // Output: [1000, 800, 600]

Spezifikationen

Spezifikation

HTML
# dom-source-width

HTML
# dimension-attributes

Browser-Kompatibilität

JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.

Siehe auch

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

HTML DOM API
HTMLSourceElement
Instanzeigenschaften
1. height
2. media
3. sizes
4. src
5. srcset
6. type
7. width
Vererbung
Verwandte Seiten für HTML DOM
Anleitungen
1. Verwenden von Microtasks in JavaScript mit queueMicrotask()
2. Im Detail: Microtasks und die JavaScript-Laufzeitumgebung