JavaScript を使用してイメージ タグのソース URL を動的に更新するにはどうすればよいですか?

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 属性を変更します:
   image 要素の参照を取得したら、その 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>

このアプローチでは、画像を 1 回クリックするだけで画像ソースが正しく更新されます。

以上がJavaScript を使用してイメージ タグのソース URL を動的に更新するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。