JavaScript を使用して画像の `src` 属性を動的に更新するにはどうすればよいですか?-jsチュートリアル-php.cn

JavaScript を使用して画像の `src` 属性を動的に更新するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-03 22:11:31

オリジナル

676 人が閲覧しました

How do I dynamically update the `src` attribute of an image using JavaScript?

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

JavaScript は、img タグの src 属性を変更し、動的な画像を有効にするためのシンプルかつ効果的な方法を提供します操作。次の HTML 構造について考えてみましょう:

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

ログイン後にコピー

最初、画像には「../template/edit.png」が表示されます。ただし、クリック時に「../template/save.png」に切り替えたいとします。これを実現するには、以下に示すように、img タグに id 属性を追加します。

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

ログイン後にコピー

edit() 関数で、次のコードスニペットを使用して画像ソースを簡単に更新できるようになりました。

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

ログイン後にコピー

この方法では、過剰なクリックを必要とせずにシームレスな画像の交換が可能です。

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