Javascript：getElementbyID 宽度问题

Question

按照 youtube 上的 javascript 教程，学习基础知识。

此处有以下代码，其中一行一行与我看到的相同（可能不包括变量名）。尝试调试并查看警报和控制台消息是否通过，但 document.getElementByID.style.width 似乎什么也没给我。

width 是一个已定义的变量（是的，应该以不同的方式命名它，以免与键名 width 冲突，但确实更改了名称和相同的结果）。将 console.log 作为输出。输出宽度很好，它确实增加了。然而，实际图像不会移动一英寸。看不出任何错别字。代码和教程完全一样。已经看了将近一个小时了。任何帮助表示赞赏。它并不多，非常基本，但我不想跳过理解为什么有些东西不起作用，谢谢。

let width =200;

let diff = 2;

let intervalID = 0;

function increase() {

  intervalID = setInterval(zoomIn, 20);

}

function zoomIn() {

  if (width < 400) {

    width = width + diff;

    document.getElementById("img2").style.width = width;

    console.log(width);

    console.log(document.getElementById("img2").style.width);

  } else {

    clearInterval(intervalID);

  }

}

<img id="img2" onmouseover="increase()" onmouseout="decrease()" src="/Images/image.png" alt="img" width="200" />

Answer 1

object.style.width 属性得到一个由数字 + px 字组成的字符串，而不仅仅是一个数字，如果你没有 decrease 方法，你将有一个未定义的异常：let width =200;let diff = 2;let intervalID = 0;function increase() {&nbsp; intervalID = setInterval(zoomIn, 20);}function zoomIn() {&nbsp; if (width < 400) {&nbsp; &nbsp; width = width + diff;&nbsp; &nbsp; document.getElementById("img2").style.width = width + "px"; // You assign for example 30px as String&nbsp; &nbsp; console.log(width);&nbsp; &nbsp; console.log(document.getElementById("img2").style.width);&nbsp; } else {&nbsp; &nbsp; clearInterval(intervalID);&nbsp; }}示例：Jsffidle 上的代码

Answer 2

width = 1;function increase() {&nbsp; intervalID = setInterval(zoomIn, 20);}function zoomIn() {&nbsp; if (width < 400) {&nbsp; &nbsp; width++;&nbsp; &nbsp; document.getElementById("img2").style.width = width;&nbsp; &nbsp; console.log(width);&nbsp; &nbsp; console.log(document.getElementById("img2").style.width);&nbsp; } else {&nbsp; &nbsp; clearInterval(intervalID);&nbsp; }}increase();例子在这里