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.
Wert
Eine nicht-negative Zahl, die die Breite der Bildressource in CSS-Pixel angibt.
Beispiele
html
<picture id="img">
<source
srcset="http://developer.mozilla.org/service/http://developer.mozilla.org/landscape.png "
media="(width >= 1000px)"
width="1000"
height="400" />
<source
srcset="http://developer.mozilla.org/service/http://developer.mozilla.org/square.png "
media="(width >= 800px)"
width="800"
height="800" />
<source
srcset="http://developer.mozilla.org/service/http://developer.mozilla.org/portrait.png "
media="(width >= 600px)"
width="600"
height="800" />
<img
src="http://developer.mozilla.org/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
| Specification |
|---|
| HTML # dom-dim-width |
Browser-Kompatibilität
Loading…