ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用してイメージ タグのソース URL を動的に更新するにはどうすればよいですか?
JavaScript を使用して画像のソース URL を変更する
JavaScript を使用して画像タグのソース URL を動的に更新するには、次のことを確認することが重要ですイベント リスナーと要素の識別を適切に処理します。
解決策:
img タグに ID を追加します:
imgタグに一意のIDを割り当てます。これは、JavaScript コード内で特にターゲットを指定するのに役立ちます。
<code class="html"><img src="../template/edit.png" id="edit-save" alt="Edit" /></code>
画像要素にアクセスします:
document.getElementById() メソッドを使用して、 img 要素への参照を取得します。
<code class="javascript">var editSave = document.getElementById("edit-save");</code>
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 サイトの他の関連記事を参照してください。