Wie aktualisiert man die Quell-URL eines Bild-Tags mithilfe von JavaScript dynamisch?

Ändern der Quell-URL eines Bildes mit JavaScript

Um die Quell-URL eines Bild-Tags mit JavaScript dynamisch zu aktualisieren, ist es wichtig, dies sicherzustellen Richtige Handhabung von Ereignis-Listenern und Elementidentifizierung.

Lösung:

1. Fügen Sie eine ID zum img-Tag hinzu:
   Weisen Sie dem img-Tag eine eindeutige ID zu. Dadurch können Sie es gezielt im JavaScript-Code ansprechen.

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

2. Greifen Sie auf das Bildelement zu:
   Verwenden Sie die Methode document.getElementById(), um Erhalten Sie eine Referenz auf das img-Element.

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

3. Ändern Sie das src-Attribut:
   Sobald Sie die Bildelementreferenz haben, können Sie dessen src ändern Attribut zum Aktualisieren der Bildquelle.

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

Beispiel:

Fügen Sie in Ihrem bereitgestellten Code eine ID wie folgt hinzu:

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

Ändern Sie dann Ihre JavaScript-Funktion:

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

Mit diesem Ansatz wird die Bildquelle mit einem einzigen Klick auf das Bild korrekt aktualisiert.

Das obige ist der detaillierte Inhalt vonWie aktualisiert man die Quell-URL eines Bild-Tags mithilfe von JavaScript dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!