如何使用 JavaScript 动态更新图像标签的源 URL？

使用 JavaScript 更改图像的源 URL

要使用 JavaScript 动态更新图像标记的源 URL，请务必确保正确处理事件监听器和元素识别。

解决方案：

1. 向 img 标签添加 ID：
   为img标签分配一个唯一的ID。这将帮助您在 JavaScript 代码中专门定位它。

   <code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>

   登录后复制

2. 访问图像元素：
   使用 document.getElementById() 方法获取对 img 元素的引用。

   <code class="javascript">var editSave = document.getElementById("edit-save");</code>

   登录后复制

3. 更改 src 属性：
   一旦获得图像元素引用，就可以修改其 src属性来更新图像源。

   <code class="javascript">editSave.src = "../template/save.png";</code>

   登录后复制

示例：

在您提供的代码中，添加如下 ID：

<code class="html"><a href="#" onclick="edit()"><img src="../template/edit.png" id="edit-save" alt="Edit" /></a></code>

然后，修改您的 JavaScript 函数：

<code class="javascript">function edit() {
    var editSave = document.getElementById("edit-save");
    editSave.src = "../template/save.png";
}</code>

通过这种方法，只需单击图像即可正确更新图像源。

以上是如何使用 JavaScript 动态更新图像标签的源 URL？的详细内容。更多信息请关注PHP中文网其他相关文章！