首頁 > web前端 > js教程 > 主體

如何使用 JavaScript 動態更新圖片標籤的來源 URL?

Patricia Arquette
發布: 2024-10-31 05:25:30
原創
363 人瀏覽過

How do you dynamically update the source URL of an image tag using JavaScript?

使用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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板