javascript - 在 JavaScript 中更新数据后，我的 DOM 对象不会更新

Question

我有一个用构造函数创建的正方形，我的所有数据都会更新，包括它的 .style.top 和 .style.left，但它不会在页面(图片)上更新。这是我的代码，我省略了构造函数本身，因为它可能不是问题。我已经包含了构造函数的方法和方法的调用，这不会更新图片。

  KeyBlock.prototype.move = function(event) {
  if(event.keyCode == 37)
    this.x -= 10;
  if(event.keyCode == 38)
    this.y -= 10;
  if(event.keyCode == 39)
    this.x += 10;
  if(event.keyCode == 40)
    this.y += 10;
  if (this.y < 0)
    this.y = 0;
  if (this.x < 0)
    this.x = 0;
  this.character.style.left = String(this.x) + "px";
  this.character.style.top = String(this.y) + "px";
  console.log(this.character.style.left);
}

me = new KeyBlock("me");
addEventListener("keyup", KeyBlock.prototype.move.bind(me));

如果您想查看构造函数，可以在这个问题中找到它，但回答问题可能不需要它:Event Handler function in prototype's method, why does it think .keyCode is a property of undefined in JavaScript?

提前谢谢:)

Answer 1

在这个问题或链接的构造函数中显示的代码中，您没有为 Angular 色提供 position 样式值。为了让 style.left 和 style.top 执行任何操作，您必须将 style.position 值设置为默认值以外的值静态。

<小时/>

仅供引用，当您向字符串添加数字时，不需要手动将内容转换为字符串(数字将自动转换)。所以代替这个:

this.character.style.left = String(this.x) + "px";

你可以这样做:

this.character.style.left = this.x + "px";