如何用HTML在JavaScript中点击显示图片

在JavaScript中通过点击来显示图片是网络开发中常用的技术，用于创建图片库、幻灯片和其他类型的基于图片的应用程序。它允许用户通过点击按钮或用户界面上的其他元素在图像之间进行导航，而不是使用一组始终可见的静态图像。

要在JavaScript中通过点击来显示图像，你可以使用HTML、CSS和JavaScript的组合来定义图像元素的结构和外观，并指定按钮或其他元素的行为，这些元素将被用来在图像之间导航。

在HTML中，你可以使用img元素来定义图像元素，并使用style属性来指定将应用于图像的CSS样式。你还可以使用src属性来指定图片的来源，并使用alt属性为无法看到图片的用户提供一个文本替代。

在CSS中，你可以使用display属性和一个类名来根据需要隐藏和显示图像。

在JavaScript中，你可以使用querySelectorAll方法来选择图像元素，并使用addEventListener方法将点击事件监听器附加到按钮或导航元素。在事件监听器函数中，你可以使用图像元素的classList属性来添加和删除控制其可见性的类，你可以使用一个循环或图像元素的数组来迭代图像，并根据需要更新其类名。

方法1：使用样式显示属性

要在JavaScript中使用HTML点击显示图像，你可以使用样式对象的显示属性，根据需要隐藏和显示图像。

语法

myImage.style.display = "block";

这里myImage的”display“属性被设置为”block“。

步骤

第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方法给按钮附加一个点击事件监听器，事件监听器函数通过设置显示属性为 “block “来显示图像。当按钮被点击时，图像将被显示出来。

你可以根据你的具体要求，根据需要定制这种行为。例如，你可能想显示多个图像或在点击按钮时切换图像的可见性。你也可以使用其他方法来显示和隐藏图像，比如使用可见性属性或添加和删除一个应用适当样式的类。

方法2：使用classList.toggle方法

这种方法允许你使用CSS类来控制图像的可见性，如果你想在图像显示或隐藏时对其应用其他样式或动画，这可能很有用。你可以根据需要通过添加或修改CSS类以及调整事件监听器函数中的逻辑来定制行为。

语法

以下是使用classList.toggle方法在JavaScript中通过点击来显示图像的语法

myImage.classList.toggle("visible");

这里myImage被设置为可见。

示例

在下面的例子中，我们使用JavaScript中的classList.toggle mwthod，通过点击来显示图片 –

<!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方法添加或删除可见类来切换图像的可见性。当按钮被点击时，可见类将被添加到图像上，使其被显示。如果按钮再次被点击，可见类将被移除，导致图像再次被隐藏。

方法3：使用隐藏属性

这种方法简单易行，它允许你使用一个标准的HTML属性来控制图像的可见性。你可以根据需要通过调整事件监听器函数中的逻辑来定制行为。

语法

以下是使用隐藏属性来显示图片的语法。

myImage.hidden = !myImage.hidden;

这里，myImage的hidden属性被设置为true。

示例

在这个例子中，我们使用JavaScript中图像的隐藏属性，通过点击来显示图像—-。

<!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属性显示或隐藏图像来切换图像的可见性。当按钮被点击时，隐藏属性将被设置为false，导致图像被显示。如果按钮再次被点击，隐藏属性将被设置为真，使图像再次被隐藏。

注意在现代浏览器中支持隐藏属性，但在旧的浏览器中可能不支持。如果你需要支持旧的浏览器，你可能想使用我前面提到的其他方法之一，比如使用style.display属性或CSS类。