← 返回首页
HTMLSourceElement: height property - Web APIs | MDN

HTMLSourceElement: height property

The height property of the HTMLSourceElement interface is a non-negative number indicating the height of the image resource in CSS pixels.

The property has an effect only if the parent of the current <source> element is a <picture> element.

It reflects the height attribute of the <source> element.

In this article

Value

A non-negative number indicating the height of the image resource in CSS pixels.

Examples

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 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.height)); // Output: [400, 800, 800]

Specifications

Specification
HTML
# dom-source-height
HTML
# dimension-attributes

Browser compatibility

Enable JavaScript to view this browser compatibility table.

See also