首頁 > web前端 > js教程 > 如何使用 JavaScript 動態變更影像標籤的 `src` 屬性?

如何使用 JavaScript 動態變更影像標籤的 `src` 屬性?

Susan Sarandon
發布: 2024-11-02 13:18:02
原創
1063 人瀏覽過

How to Dynamically Change the `src` Attribute of an Image Tag Using JavaScript?

透過 JavaScript 變更映像標籤的 Source 屬性

查詢:

如何修改使用 JavaScript 動態建立 img 標籤?

範例:

考慮一個初始 src 路徑為「../template/edit.png」的 img 標籤。目標是在單擊標籤時將此路徑更改為“../template/save.png”。

ID 為HTML 程式碼:

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

有getElementById 的JavaScript 程式碼:

<code class="javascript">document.getElementById("edit-save").src = "../template/save.png";</code>
登入後複製

說明:

透過為img 標籤指派id,您可以輕鬆選擇並操作它使用JavaScript。 getElementById 方法傳回具有指定 id 的 HTML 元素。然後,您可以存取其 src 屬性並直接指派新的來源路徑。

注意:

此方法避免了多次點擊來更改來源的需要,如您之前的嘗試。

以上是如何使用 JavaScript 動態變更影像標籤的 `src` 屬性?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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