如何在 JavaScript 中以程式控制圖像來源屬性？

對影像來源屬性的程式控制

在Web開發領域，經常需要動態修改頁面的內容。一項常見任務是更改圖像標籤的來源屬性。了解如何使用 JavaScript 來完成此操作對於建立響應式和互動式 Web 應用程式至關重要。

使用 HTML5 img 標籤，我們可以在網頁上顯示圖片。透過存取該標籤的 src 屬性，我們可以控制顯示的圖像。讓我們探討一下如何做到這一點。

動態變更影像來源

要以程式設計方式變更 src 屬性，我們必須先使用其 id 或其他唯一識別碼來識別 img 標籤。一旦我們有了標籤的引用，我們就可以使用 JavaScript 來修改它的 src 屬性。

例如，要更改id 為「myImage」的img 標籤的src 屬性以顯示新影像，我們將使用以下程式碼：

<code class="javascript">document.getElementById("myImage").src = "new-image.jpg";</code>

處理事件和影像來源更新

在給定的場景中，需要根據事件更改img 標籤的src 屬性，我們可以利用事件監聽器來觸發來源更新。假設我們想要在使用者點擊圖像時交換圖像。

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

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

透過將 onclick 屬性新增至 img 標籤並將其與 JavaScript 函數關聯，我們確保圖像來源點擊圖像時會更新。

以上是如何在 JavaScript 中以程式控制圖像來源屬性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！