HTMLLinkElement: imageSizes-Eigenschaft

Baseline 2023

Neu verfügbar

Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die imageSizes-Eigenschaft des HTMLLinkElement-Interfaces gibt die Größe und Bedingungen für die vorgeladenen 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 setzen.

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 beinhaltet eine Medienbedingung, die Größe des Bildes als <length> oder das Schlüsselwort auto, das als erstes kommen muss. Für weitere Informationen zur Syntax des sizes-Attributs siehe <img>.

Die imagesrcset- und imagesizes-Attribute sind nur bei <link>-Elementen relevant, die sowohl ein rel-Attribut auf preload gesetzt als auch das as-Attribut auf image gesetzt haben.

Wert

Ein String, der aus kommagetrennten Quellgrößen besteht, oder der leere String "", wenn nicht angegeben.

Beispiele

Gegeben sei 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" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

…kann man den Wert des imagesizes-Attributs mit der imageSizes-Eigenschaft abrufen und aktualisieren:

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

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

Spezifikationen

Spezifikation
HTML # dom-link-imagesizes

Browser-Kompatibilität

Siehe auch

Help improve MDN

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

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