JavaScript で画像ソース属性をプログラムで制御するにはどうすればよいですか?

画像ソース属性のプログラムによる制御

Web 開発の領域では、多くの場合、ページのコンテンツを動的に変更する必要があります。一般的なタスクの 1 つは、イメージ タグのソース属性を変更することです。 JavaScript を使用してこれを実現する方法を理解することは、応答性の高いインタラクティブな Web アプリケーションを作成するために不可欠です。

HTML5 img タグを使用すると、Web ページに画像を表示できます。このタグの src 属性にアクセスすることで、表示される画像を制御できます。これを行う方法を見てみましょう。

画像ソースを動的に変更する

プログラムで src 属性を変更するには、まず id またはその他の一意の識別子を使用して img タグを識別する必要があります。タグへの参照を取得したら、JavaScript を使用してその src プロパティを変更できます。

たとえば、「myImage」という ID を持つ img タグの src 属性を変更して新しい画像を表示するには、次のようにします。次のコードを使用します。

<code class="javascript">document.getElementById("myImage").src = "new-image.jpg";</code>

イベントと画像ソースの更新の処理

イベント時に img タグの src 属性を変更する必要がある特定のシナリオでは、次のコードを利用できます。イベント リスナーを使用してソースの更新をトリガーします。ユーザーが画像をクリックしたときに画像を交換したいとします。

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

<code class="javascript">function changeImage() {
  document.getElementById("edit-save").src = "../template/save.png";
}</code>

onclick 属性を img タグに追加し、それを JavaScript 関数に関連付けることにより、画像ソースが画像をクリックすると更新されます。

以上がJavaScript で画像ソース属性をプログラムで制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。