值
一個字串,指示 HTMLImageElement 所代表的 <img> 元素中當前可見的圖片的完整 URL。當您使用 sizes 和/或 HTMLImageElement.srcset 屬性提供多個影像選項時,這非常有用。currentSrc 允許您確定在提供的影像集中,瀏覽器選擇了哪張影像。
示例
在此示例中,為一張時鐘圖片提供了兩種不同的尺寸。一種是 200px 寬,另一種是 400px 寬。提供了 sizes 屬性來指示,如果視口寬度小於 400px,則影像應以文件寬度的 50% 的比例繪製;否則,影像以文件寬度的 90% 的比例繪製。
HTML
html
<img
src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png"
alt="Clock"
srcset="
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
"
sizes="(width <= 400px) 50%, 90%" />
JavaScript
js
const clockImage = document.querySelector("img");
const p = document.createElement("p");
p.textContent = clockImage.currentSrc.endsWith("200px.png")
? "Using the 200px image!"
: "Using the 400px image.";
document.body.appendChild(p);
結果
規範
| 規範 |
|---|
| HTML # dom-img-currentsrc-dev |
瀏覽器相容性
載入中…