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() {

  intervalID = setInterval(zoomIn, 20);

}

function zoomIn() {

  if (width < 400) {

    width = width + diff;

    document.getElementById("img2").style.width = width + "px"; // You assign for example 30px as String

    console.log(width);

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

  } else {

    clearInterval(intervalID);

  }

}

示例：Jsffidle 上的代码

Answer 2

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();

例子在这里