如何使用簡單的 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";

使用類別選擇器：

為要變更的影像新增類別：

<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中文網其他相關文章！