HTMLLinkElement: imageSrcset 属性

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的设备和浏览器版本上使用。此功能可能无法在较旧的设备或浏览器上使用。

HTMLLinkElement 接口的 imageSrcset 属性是一个字符串，用于标识一个或多个由逗号分隔的 **图像候选字符串**。此属性反映了 <link> 元素的 imagesrcset 属性的值。此属性可以检索或设置 imagesrcset 属性的值。

每个图像候选字符串包含一个图像 URL 和一个可选的宽度和/或像素密度描述符，指示应使用该候选图像的条件。

"images/team-photo.jpg, images/team-photo-retina.jpg 2x, images/team-photo-large.jpg 1400w"

对于设置了 rel="preload" 和 as="image" 的 HTML <link> 元素，imagesrcset 属性的语法和语义与 <img> 元素的 srcset 属性相似，它指示预加载由具有相应 srcset 和 sizes 属性值的 <img> 元素使用的适当资源。

如果 imageSrcset 属性包含宽度描述符，则 imageSizes 属性必须非空，否则 imageSrcset 值将被忽略。

值

一个由一个或多个图像候选字符串组成的逗号分隔列表组成的字符串，如果未指定，则为空字符串 ""。

示例

给定以下 <link> 元素

html

<link
  rel="preload"
  as="image"
  imagesizes="50vw"
  imagesrcset="bg-narrow.png, bg-wide.png 800w" />

<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;
}

…我们可以使用 imageSrcset 属性访问 imagesrcset 属性值并更新它

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

// add an image candidate string
link.imageSrcset += ", bg-huge.png 1200w";
log(`Updated: ${link.imageSrcset}`);

规范

规范
HTML # dom-link-imagesrcset

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年4月16日，由 MDN 贡献者。

在 GitHub 上查看此页面 • 报告此内容的问题