javascript - 使用 JavaScript 在我的 html 页面中放大图像

Question

我尝试使用 JavaScript 在我的 html 页面中放大图像。 html- 源代码中的图像始终具有 100 像素的高度/宽度。通过单击图像，图像应以原始大小显示。 再次单击图片，图片应以高/宽 100 像素显示。

html 源代码中的示例图像:

<img src="image.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

我的 JavaScript 源代码:

function swap(img)
 {
  if (img.width==="100")
   {
    img.width="auto";
    img.height="100%";
   }
  else
   {
    img.width="100";
    img.height="100";
   }
}

我的问题是图像大小没有改变。我究竟做错了什么？ 有人有更好的主意吗？

Answer 1

如果您的图片还没有 CSS 类，您可以轻松地更换全尺寸类。

function swap(img) {
  if (img.className !== "full-size") img.className = "full-size";
  else img.className = "";
}

.full-size {
  height: 100%;
  width: 100%;
}

<img src="https://multimedia.journalism.berkeley.edu/wp-content/uploads/2014/09/css101-main.jpg" onClick="swap(this)" onmouseover="" style="cursor: pointer;" height="100" width="100">

不过，您最好使用 jQuery 来处理单个 HTML 元素上的多个类。