Wie aktualisiere ich das Attribut „src' eines Bildes mithilfe von JavaScript dynamisch?

Bildquelle mithilfe von JavaScript dynamisch aktualisieren

JavaScript bietet eine einfache, aber effektive Methode zum Ändern des src-Attributs eines img-Tags und ermöglicht so ein dynamisches Bild Manipulation. Betrachten Sie die folgende HTML-Struktur:

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

Zunächst zeigt das Bild „../template/edit.png“ an. Sie möchten es jedoch beim Klicken auf „../template/save.png“ ändern. Um dies zu erreichen, fügen Sie dem img-Tag ein ID-Attribut hinzu, wie unten gezeigt:

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

In Ihrer edit()-Funktion können Sie die Bildquelle jetzt mühelos mit dem folgenden Codeausschnitt aktualisieren:

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

Diese Methode ermöglicht einen nahtlosen Bildwechsel, ohne dass übermäßige Klicks erforderlich sind.

Das obige ist der detaillierte Inhalt vonWie aktualisiere ich das Attribut „src' eines Bildes mithilfe von JavaScript dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!