javascript - 有没有办法使用 JS 显式更改源的扩展名？

Question

初学者在这里。我有一系列如下所示的 HTML IMG 元素：

<img src="1.png" onclick="changeImg(this)">
<img src="2.png" onclick="changeImg(this)">
<img src="3.png" onclick="changeImg(this)">

我想要“changeImg”JS函数做的是，点击时，将图像源从“1.png”更改为“1.gif”。本质上，只需更改 img 源的最后 3 个字母。

这样做的目的是允许用户单击元素以播放动画 GIF。因此，“1.png”只是动画“1.gif”的静态 PNG 版本。这可以做到吗？

标签： javascripthtml

Answer 1

使用img.src：

function changeImg(img) {
  img.src = img.src.replace('png', 'gif');
}

<img src="1.png" onclick="changeImg(this)">