如何使用 HTML 在 JavaScript 中单击显示图像？
在 JavaScript 中单击显示图像是 Web 开发中用于创建图片库、幻灯片和其他类型的基于图像的应用程序的常用技术。它允许用户通过单击用户界面中的按钮或其他元素在图像之间导航，而不是使用始终可见的静态图像集。
要在 JavaScript 中单击显示图像，您可以结合使用 HTML、CSS 和 JavaScript 来定义图像元素的结构和外观，并指定将用于在图像之间导航的按钮或其他元素的行为。
在 HTML 中，您可以使用 img 元素来定义图像元素，并使用 style 属性来指定将应用于图像的 CSS 样式。您还可以使用 src 属性指定图像的来源，并使用 alt 属性为无法看到图像的用户提供替代文本。
在 CSS 中，您可以使用 display 属性和类名根据需要隐藏和显示图像。
在 JavaScript 中，您可以使用 querySelectorAll() 方法选择图像元素，并使用 addEventListener 方法将点击事件侦听器附加到按钮或导航元素。在事件侦听器函数中，您可以使用图像元素的 classList 属性来添加和删除控制其可见性的类，并且可以使用循环或图像元素数组来迭代图像并根据需要更新其类名。
方法 1：使用样式显示属性
要使用 HTML 在 JavaScript 中单击显示图像，您可以使用样式对象的显示属性根据需要隐藏和显示图像。
语法
以下是使用 JavaScript 中的显示属性显示图像的语法 -
myImage.style.display = "block";
此处，myImage 的"display"属性设置为"block"。
步骤
您可以按照以下步骤使用 HTML 在 JavaScript 中单击显示图像 -
步骤 1 - 创建一个包含按钮元素和图像元素的 HTML 文件。
步骤 2 - 在图像元素中，使用样式属性将显示属性设置为"无"。默认情况下，这将隐藏图像。
步骤 3 - 在 JavaScript 代码中，使用 getElementById() 方法选择按钮和图像元素。
步骤 4 - 使用 addEventListener 方法将点击事件侦听器附加到按钮元素。
步骤 5 - 在事件侦听器函数中，使用图像元素的 style.display 属性将其值从"none"更改为"block"。这将使图像可见。
通过遵循这些步骤，您可以创建一个简单的图库或幻灯片，让用户通过单击用户界面中的按钮或其他元素来显示和隐藏图像
示例
以下是您可以如何执行此操作的示例：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h2>Showing image with a click in JavaScript</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/static/images/logo-color.png" style="display: none;">
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.style.display = "block";
});
</script>
</body>
</html>
在此示例中，HTML 文件定义了一个按钮和一张图片。最初通过将样式对象的 display 属性设置为"none"来隐藏图片。JavaScript 代码使用 addEventListener() 方法将点击事件侦听器附加到按钮，事件侦听器函数通过将 display 属性设置为"block"来显示图片。单击按钮时，将显示图片。
您可以根据您的特定要求根据需要自定义此行为。例如，您可能希望在单击按钮时显示多张图片或切换图片的可见性。您还可以使用其他方法来显示和隐藏图像，例如使用visibility属性或添加和删除应用适当样式的类。
方法2：使用classList.toggle方法
此方法允许您使用CSS类来控制图像的可见性，如果您想在显示或隐藏图像时向其应用其他样式或动画，这种方法非常有用。您可以根据需要通过添加或修改CSS类以及调整事件侦听器函数中的逻辑来自定义行为。
语法
以下是使用classList.toggle方法在JavaScript中单击显示图像的语法-
myImage.classList.toggle("visible");
此处 myImage 设置为可见。
示例
在下面的示例中，我们使用 JavaScript 中的 classList.toggle 方法通过单击显示图像 −
<!DOCTYPE html>
<html>
<head>
<title>Example </title>
</head>
<body>
<h1>Showing image with a click in JavaScript</h1>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/javascript/images/javascript.jpg" class="hidden">
<style>
.hidden { display: none; }
.visible { display: block; }
</style>
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.classList.toggle("visible");
});
</script>
</body>
</html>
在此示例中，HTML 文件定义了一个按钮和一张图片，图片最初使用名为 hidden 的 CSS 类隐藏。JavaScript 代码使用 addEventListener() 方法将点击事件监听器附加到按钮，事件监听器函数通过使用 classList.toggle() 方法添加或删除 visible 类来切换图片的可见性。单击按钮时，visible 类将添加到图片，使其显示出来。如果再次单击按钮，visible 类将被删除，导致图片再次隐藏。
方法 3：使用 Hidden 属性
此方法简单易用，它允许您使用标准 HTML 属性控制图片的可见性。您可以通过调整事件侦听器函数中的逻辑来根据需要自定义行为。
语法
以下是使用 hidden 属性显示图像的语法：
myImage.hidden = !myImage.hidden;
此处，myImage 的 hidden 属性设置为 true。
示例
在此示例中，我们使用 JavaScript 中图像的 hidden 属性通过单击显示图像 −
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h2>Showing image with a click in JavaScript</h2>
<button id="show-image-button">Show Image</button>
<img id="my-image" src="https://www.tutorialspoint.com/static/images/logo-color.png" hidden>
<script>
const showImageButton = document.getElementById("show-image-button");
const myImage = document.getElementById("my-image");
showImageButton.addEventListener("click", () => {
myImage.hidden = !myImage.hidden;
});
</script>
</body>
</html>
在此示例中，HTML 文件定义了一个按钮和一张图片，图片最初使用 hidden 属性隐藏。JavaScript 代码使用 addEventListener() 方法将点击事件监听器附加到按钮，事件监听器函数通过使用 hidden 属性显示或隐藏图片来切换图片的可见性。单击按钮时，hidden 属性将设置为 false，从而显示图片。如果再次单击按钮，hidden 属性将设置为 true，从而再次隐藏图片。
请注意 hidden 属性在现代浏览器中受支持，但在较旧的浏览器中可能不受支持。如果您需要支持较旧的浏览器，您可能需要使用我之前提到的其他方法之一，例如使用 style.display 属性或 CSS 类。
