クリック時に JavaScript を使用して画像ソースを動的に変更するにはどうすればよいですか?

JavaScript を使用した画像ソースの動的変更

Web 開発では、異なる画像を表示するために画像タグ (img タグ) のソース属性をプログラムで変更する必要がある場合があります。ユーザーインタラクションまたは動的コンテンツに基づいて。これを実現するために、JavaScript には HTML 要素を操作するためのさまざまなメソッドが用意されています。

次のシナリオを考えてみましょう:

<img src="/static/imghw/default1.png" data-src="../template/edit.png" class="lazy" name="edit-save" alt="クリック時に JavaScript を使用して画像ソースを動的に変更するにはどうすればよいですか?"><br>

最初、画像タグにはソース「edit.png」を持つ画像が表示されます。目標は、画像をクリックしたときにこのソースを「save.png」に変更することです。これを実現するには、以下に示すように、onclick イベント ハンドラーを含む HTML タグを使用できます。

<a href="#" onclick="edit()"></a><br>

クリック時に JavaScript を使用して画像ソースを動的に変更するにはどうすればよいですか?( ) 関数を JavaScript で実装して、目的のソース変更を実行できます:

function edit()<br>{<pre class="brush:php;toolbar:false">var inputs = document.myform;
for(var i = 0; i <p>}<br></p>

> ;

イメージ タグ (この場合は「edit-save」) に ID を割り当てることにより、JavaScript コードはその src 属性にアクセスして変更できます。提供されたスニペットは、ID によって HTML 要素を取得し、その src 属性を目的のソースに設定して、表示される画像を効果的に変更します。

提供した元のコードが edit( ) 機能が原因で、ソースを変更するのに 2 回のクリックが必要になるという問題が発生しました。画像ソースの操作を別のステップに分けることで、この不便を回避し、最初のクリックで画像ソースがすぐに変更されるようにすることができます。

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