ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript を使用してイメージ タグのソース URL を動的に更新するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-10-31 05:25:30371ブラウズ

How do you dynamically update the source URL of an image tag using JavaScript?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。