javascript - Javascript：getElementbyID 宽度问题

Question

遵循 youtube 上的 javascript 教程，学习基础知识。

在这里有以下代码，哪一行与我看到的相同（可能不包括变量名）。试图调试并看到警报和控制台消息通过，但 document.getElementByID.style.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" />

标签： javascripthtml

Answer 1

width = 1;
function increase() {
  intervalID = setInterval(zoomIn, 20);
}

function zoomIn() {
  if (width < 400) {
    width++;
    document.getElementById("img2").style.width = width;
    console.log(width);
    console.log(document.getElementById("img2").style.width);
  } else {
    clearInterval(intervalID);
  }
}

increase();

例子在这里