HTMLSourceElement : propriété width
Baseline
Large disponibilité
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis décembre 2022.
La propriété width de l'interface HTMLSourceElement est un nombre positif ou nul indiquant la largeur de la ressource image en pixels CSS.
Cette propriété n'a d'effet que si le parent de l'élément HTML <source> courant est un élément HTML <picture>.
Elle reflète l'attribut width de l'élément <source>.
Valeur
Un nombre positif ou nul indiquant la largeur de la ressource image en pixels CSS.
Exemples
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 utilisée lorsque le navigateur ne prend pas en charge les 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)); // Affiche : [1000, 800, 600]
Spécifications
| Spécification |
|---|
| HTML # dom-source-width |
| HTML # dimension-attributes |
Compatibilité des navigateurs
Voir aussi
- La propriété
HTMLCanvasElement.width - La propriété
HTMLEmbedElement.width - La propriété
HTMLIFrameElement.width - La propriété
HTMLImageElement.width - La propriété
HTMLObjectElement.width - La propriété
HTMLVideoElement.width