在javascript中调整图像大小答案

【问题标题】：resizing image in javaScript在javascript中调整图像大小
【发布时间】：2020-09-19 21:26:48
【问题描述】：

我正在尝试通过单击按钮来更改图像大小。像（如果我点击名为 100 的按钮，图像大小应变为 100x100）。

html代码为：

  <!DOCTYPE html>
   <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    </head>
    <body>
    <img class="image" src="pic.jpg" alt="pic">
    <div class="btn">
    <button type="button" class="h100xw100">100</button>
    <br>
    <button type="button" class="h200xw200">200</button>
    <br>
    <button type="button" class="h300xw300">300</button>
    <br>
    <button type="button" class="h400xw400">400</button>
    </div>

    <script src="index.js"></script>
    </body>
  </html>

JS代码是


   

      var image= document.getElementsByTagName("img");

      for(var i=0;i<document.getElementsByTagName("button").length;i++)
        {
         document.getElementsByTagName("button")[i].addEventListener("click",function()
        { 
         action(this.innerHTML);});
           }
              function action(value)
                  {
           for(var i=0;i<document.getElementsByTagName("button").length;i++)
               {
                  switch(value)
                {
                    case "100": 
                            image.style.width="100";
                            image.style.height="100";
                                     break;

                    case "200" :
                            image.style.width="200";
                            image.style.height="200";
                                     break;
        
                    case "300" :
                            image.style.width="300";
                            image.style.height="300";
                                     break;

                    case "400" :
                             image.style.width="400";
                             image.style.height="400";
                                     break;

        default: alert("max-size reached");

                   }
                      }
                          }

我什至也使用过 querySelector。但不工作！

我也尝试过在没有匿名函数的情况下调用函数操作

喜欢

document.getElementsByTagName("button")[i].addEventListener("click",action);

【问题讨论】：

执行代码时获取对象的方法是否有效？
是的，它正在工作。
可以跳过switch，直接将value分配给width和height吗？

标签： javascript html

【解决方案1】：

我做了两个较小的修复。下面是代码 sn-p，它将起作用：

<script>
        var image = document.getElementsByTagName("img")[0]; //<--------This is Array

        for (var i = 0; i < document.getElementsByTagName("button").length; i++) {
            document.getElementsByTagName("button")[i].addEventListener("click", function () {
                action(this.innerHTML);
            });
        }
        function action(value) {
            for (var i = 0; i < document.getElementsByTagName("button").length; i++) {
                switch (value) {
                    case "100":
                        image.style.width = "100px"; //<--- Add "px"
                        image.style.height = "100px";
                        break;

                    case "200":
                        image.style.width = "200px";
                        image.style.height = "200px";
                        break;

                    case "300":
                        image.style.width = "300px";
                        image.style.height = "300px";
                        break;

                    case "400":
                        image.style.width = "400px";
                        image.style.height = "400px";
                        break;

                    default: alert("max-size reached");

                }
            }
        }
    </script>

【讨论】：

请告诉我将 'img' 视为数组是如何工作的。
注意：getElementsByTagName() 方法返回文档中所有元素的集合，这些元素由您传递的元素名称（在本例中为“img”）指定。如果您控制该行，您将看到一个 Array

【解决方案2】：

var images=document.getElementsByTagName("img");
var buttons=document.getElementsByTagName("button");

function btnClick(btn) {
  for(var img=0; img<images.length; img++) {
    images[img].style.width=buttons[btn].textContent+"px";
    images[img].style.height=buttons[btn].textContent+"px";
  }
}

for(var btn=0; btn<buttons.length; btn++) {
  buttons[btn].setAttribute("onclick", "btnClick("+btn+")");
}

<button>10</button>
<button>20</button>
<button>30</button>
<button>40</button>
<hr>
<img width="35" height="25">
<img width="28" height="50">
<img width="57" height="75">

【讨论】：

不客气。抱歉，我没有使用事件监听器——我试过了，但我想我对它们还不够好。我会很感激选择我的答案 - 这就是人们在这里前进的方式。