HTMLLinkElement: imageSizes-Eigenschaft

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die imageSizes-Eigenschaft des HTMLLinkElement-Interfaces gibt die Größe und Bedingungen für die vorab geladenen Bilder an, die durch die imageSrcset-Eigenschaft definiert sind. Sie spiegelt den Wert des imagesizes-Attributs des <link>-Elements wider. Diese Eigenschaft kann den Wert des imagesizes-Attributs abrufen oder festlegen.

Das imagesizes-Attribut des <link>-Elements ist dasselbe wie das sizes-Attribut des <img>-Elements: eine durch Kommas getrennte Liste von Quellgrößen. Jede Quellgröße enthält eine Medienbedingung, die Größe des Bildes als <length>, oder das Schlüsselwort auto, welches zuerst kommen muss. Weitere Informationen zur Syntax des sizes-Attributs finden Sie unter <img>.

Die Attribute imagesrcset und imagesizes sind nur für <link>-Elemente relevant, die sowohl ein rel-Attribut auf preload als auch ein as-Attribut auf image gesetzt haben.

Wert

Ein String, der aus durch Kommas getrennten Quellgrößen besteht, oder der leere String "", wenn kein Wert angegeben ist.

Beispiele

Gegeben das folgende <link>-Element:

html
<link
  rel="preload"
  as="image"
  imagesrcset="narrow.png, medium.png 600w, wide.png 1200w"
  imagesizes="(width < 400px) 200px, (400px <= width < 600px) 75vw, 50vw" />

…können wir den Wert des imagesizes-Attributs mit der imageSizes-Eigenschaft abrufen und aktualisieren:

js
const link = document.querySelector("link");
log(`Original: ${link.imageSizes}`);

// Change the value
link.imageSizes = "50vw";
log(`Updated: ${link.imageSizes}`);

Spezifikationen

Specification
HTML
# dom-link-imagesizes

Browser-Kompatibilität

Siehe auch