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 上檢視此頁面 • 報告此內容的問題