如何使用简单的 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中文网其他相关文章！