簡単な JavaScript メソッドを使用してクリック時に画像を変更する方法

簡単な方法を使用してクリック時に画像を変更する方法

このシナリオでは、クリック時に画像を別のバージョンに置き換えたいとします。親要素に。 jQuery などの複雑な JavaScript フレームワークを使用することもできますが、このタスクはより単純なメソッドで実現できます。

次の HTML 構造を考えてみましょう:

<li><img src="default.jpg" alt="Image 1" /></li>
<li><img src="default.jpg" alt="Image 2" /></li>
<li><img src="default.jpg" alt="Image 3" /></li>
<li><img src="default.jpg" alt="Image 4" /></li>
<li><img src="default.jpg" alt="Image 5" /></li>

ID 属性の使用:

画像に一意の ID を割り当てます。変更:

<img src="default.jpg" alt="Image 1">

次に、JavaScript で document.getElementById 関数を使用します:

document.getElementById("image1").src = "colored.jpg";

クラス セレクターの使用:

必要な画像にクラスを追加しますchange:

<img src="default.jpg" alt="Image 1" class="image" />

Document.querySelectorAll は、指定された CSS セレクターに一致するすべての要素を返します。

const images = document.querySelectorAll(".image");
images.forEach((image) => {
  image.src = "colored.jpg";
});

アクティブ擬似クラスの使用:

要素をクリックすると、アクティブな疑似クラスがその要素に適用されます。これは、要素がクリックされたときに画像を変更するために利用できます:

<img src="default.jpg" alt="Image 1" />

li:active img {
  src: "colored.jpg";
}

これらのメソッドは、複雑な JavaScript フレームワークに依存せずに、クリック時に画像を更新するためのより簡単な代替手段を提供します。

以上が簡単な JavaScript メソッドを使用してクリック時に画像を変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。