单击时如何使图像变大？(1)

📌 相关文章

📜 单击时如何使图像变大？(1)

📅 最后修改于: 2023-12-03 15:37:03.195000 🧑 作者: Mango

单击时如何使图像变大？

在网页设计中，我们经常需要使用图片。有时候，我们需要在单击或鼠标悬浮时将图片放大。这种情况下，我们就需要使用JavaScript和CSS来实现。

实现思路

我们需要在HTML中添加一张图片。然后，通过CSS将其样式设置为默认大小。接着，在JavaScript中监听单击事件，当单击事件发生时，通过CSS将图片样式设置为放大后的大小即可。

实现步骤

在HTML中添加图片
```
<img src="image.jpg" alt="image" id="img">
```
我们给图片添加了一个id属性，方便后续在JavaScript中获取到该元素。
在CSS中设置图片样式
```
#img {
  width: 200px; /* 默认宽度 */
  height: 200px; /* 默认高度 */
}
```
我们将图片的宽度和高度设置为200px，作为默认值。

在JavaScript中添加事件监听

var img = document.getElementById("img"); // 获取图片元素
img.addEventListener("click", function() {
  this.style.width = "400px"; // 设置宽度为400px
  this.style.height = "400px"; // 设置高度为400px
});

当图片被单击时，将它的宽度和高度设置为400px，实现了放大效果。

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>单击时如何使图像变大？</title>
  <style>
    #img {
      width: 200px; /* 默认宽度 */
      height: 200px; /* 默认高度 */
    }
  </style>
</head>
<body>
  <img src="image.jpg" alt="image" id="img">
  <script>
    var img = document.getElementById("img"); // 获取图片元素
    img.addEventListener("click", function() {
      this.style.width = "400px"; // 设置宽度为400px
      this.style.height = "400px"; // 设置高度为400px
    });
  </script>
</body>
</html>

以上便是如何实现在单击时使图像变大的完整代码。