在javascript中单击时更改图像大小答案

【问题标题】：Change image size when clicking on it in javascript在javascript中单击时更改图像大小
【发布时间】：2017-12-16 12:06:32
【问题描述】：

我想在单击图像时更改图像大小这是我的代码

function resizeImage(img) {
  var img = document.getElementsByClassName('image-slide');
  img.style.width = "500px";
  img.style.height = "500px";
  return img;
}

<figure id="image-box">
  <img src="images/bicycle.jpg" alt="Bicycle image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="images/fantasy.jpg" alt="Fantasy image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="images/helicopter.jpg" alt="Helicopter image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="images/hot-choco.jpg" alt="Hot Chocolate image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">

</figure>

实际上我希望如果我点击一个图像它的 javascript 会增加这个图像的大小我尝试了很多 javascript 但没有任何帮助我。

【问题讨论】：

var img = document.getElementsByClassName('image-slide'); 返回一个节点数组并重新定义你的img 参数，为什么不直接使用参数呢？（为什么要返回 img？）
请注意，您的解决方案会更改图像的纵横比（不是正方形到正方形）。
@MarkSchultheiss 他想知道如何增加图像大小..他关心的不是宽高比......所以你可以给他解决这个问题

标签： javascript html image

【解决方案1】：

您可以像这样简单地更正您的代码，因为您已经通过使用 this 在函数中获取所需的元素：

function resizeImage(img) {
  img.style.width = "500px";
  img.style.height = "500px";
}

<figure id="image-box">
  <img src="https://lorempixel.com/400/400/" alt="Bicycle image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="https://lorempixel.com/400/400/" alt="Fantasy image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="https://lorempixel.com/400/400/" alt="Helicopter image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">
  <img src="https://lorempixel.com/400/400/" alt="Hot Chocolate image" style="width:100px;height:80px;" class="image-slide" onclick="resizeImage(this)">

</figure>

如果有兴趣，可以使用 jQuery 的更通用的解决方案：

$('.image-slide').click(function() {
 $(this).css('height',500);
 $(this).css('width',500);
})

#image-box .image-slide {
  width: 100px;
  height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure id="image-box">
  <img src="https://lorempixel.com/400/400/" alt="Bicycle image" class="image-slide">
  <img src="https://lorempixel.com/400/400/" alt="Fantasy image" class="image-slide">
  <img src="https://lorempixel.com/400/400/" alt="Helicopter image" class="image-slide">
  <img src="https://lorempixel.com/400/400/" alt="Hot Chocolate image" class="image-slide">

</figure>

【讨论】：

非常感谢，我只是停留在这个关键字上你已经解决了我的问题，非常感谢。现在我完全理解它并在 javascript 中找到 b/w id 和类的差异。谢谢再次兄弟。

【解决方案2】：

<figure id="image-box">
        <img src="images/bicycle.jpg" alt="Bicycle image"           width="100" height="80" class="image-slide"  onclick="resizeImage(this)"    >
        <img src="images/fantasy.jpg" alt="Fantasy image"           width="100" height="80" class="image-slide"  onclick="resizeImage(this)"    >
        <img src="images/helicopter.jpg" alt="Helicopter image"     width="100" height="80" class="image-slide"  onclick="resizeImage(this)"    >
        <img src="images/hot-choco.jpg" alt="Hot Chocolate image"   width="100" height="80" class="image-slide"  onclick="resizeImage(this)"    >

        </figure>

        Here is my JS

        function resizeImage(img)
        {

           img.width = parseInt(img.width) + 200;
           img.height = parseInt(img.height)+ 200;
        }

我已经修改了你的代码，只删除了var img = document.getElementsByClassName('image-slide');这一行并通过动态方式修改img标签的width和height属性

【讨论】：

示例中 OP 的高度为 500，但您将其设置为（有效）280，这是不同的。
@MarkSchultheiss 我只是举个例子......这样他就会知道如何让它变得动态......找到这样的错误是没有意义的。如果有人帮助提出正确的想法......