javascript - 为什么单击按钮时对象不移动？

Question

单击按钮时对象没有移动。为什么会这样？

function animate() {
  var object = document.getElementById('object').style;
  var x = 100;
  object.left = x + 'px';
}

#object {
  position: absolute;
  top: 50px;
  right: 20px;
  left: 20px;
  height: 40px;
  width: 80px;
  background-color: green;
}

Answer 1

您不应该从 DOM 元素中分离样式对象。此外，您的函数名称与 native 冲突 Element.animate函数，以不同的方式命名您的函数。

这应该有效:

function animateX() {
  var object = document.getElementById('object');
  var x = 100;
  object.style.left = x + 'px';
}

#object {
  position: absolute;
  top: 50px;
  right: 20px;
  left: 20px;
  height: 40px;
  width: 80px;
  background-color: green;
}

<div id="object" onclick="animateX()"></div>