HTMLLinkElement: imageSrcset-Eigenschaft
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.
Die imageSrcset-Eigenschaft des HTMLLinkElement-Interfaces ist ein String, der eine oder mehrere durch Kommas getrennte Bildkandidaten-Strings identifiziert. Diese Eigenschaft spiegelt den Wert des imagesrcset-Attributs des <link>-Elements wider. Diese Eigenschaft kann den imagesrcset-Attributwert abrufen oder setzen.
Jeder Bildkandidaten-String enthält eine Bild-URL und einen optionalen Breiten- und/oder Pixeldichte-Deskriptor, der die Bedingungen angibt, unter denen das entsprechende Kandidatenbild verwendet werden soll.
"images/team-photo.jpg, images/team-photo-retina.jpg 2x, images/team-photo-large.jpg 1400w"
Für HTML-<link>-Elemente mit rel="preload" und as="image" hat das imagesrcset-Attribut eine ähnliche Syntax und Semantik wie das srcset-Attribut des <img>-Elements, das angibt, die entsprechende Ressource vorzuladen, die von einem <img>-Element mit entsprechenden Werten für seine srcset- und sizes-Attribute verwendet wird.
Wenn die imageSrcset-Eigenschaft Breiten-Deskriptoren enthält, muss die imageSizes-Eigenschaft nicht-null sein, sonst wird der imageSrcset-Wert ignoriert.
Wert
Ein String, der aus einer durch Kommas getrennten Liste von einem oder mehreren Bildkandidaten-Strings besteht, oder der leere String "", wenn nicht angegeben.
Beispiele
Gegeben sei das folgende <link>-Element:
<link
rel="preload"
as="image"
imagesizes="50vw"
imagesrcset="bg-narrow.png, bg-wide.png 800w" />
...können wir den Wert des imagesrcset-Attributs mit der imageSrcset-Eigenschaft abrufen und aktualisieren:
const link = document.querySelector("link");
log(`Original: ${link.imageSrcset}`);
// add an image candidate string
link.imageSrcset += ", bg-huge.png 1200w";
log(`Updated: ${link.imageSrcset}`);
Spezifikationen
| Spezifikation |
|---|
| HTML # dom-link-imagesrcset |