为什么对象没有单击按钮？

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元素中分离样式对象。此外，您的函数名称与本机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>

Answer 2

如果我们假设您的object id元素是按钮，那么您需要做的就是为它附加一个事件监听器，以便在您单击它时调用animate函数。

const object = document.getElementById('object');
object.addEventListener('click', animate, false);

现在我们只需要重写你的animate函数，以便它移动与点击相关联的元素。

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

<强> DEMO

如果您不希望自己的按钮成为该对象，请在HTML中添加一个按钮：

<button id="button">Click me</button>

然后将事件监听器添加到按钮：

const button = document.getElementById('button');
button.addEventListener('click', animate, false);

然后将animate函数还原为原来的样式。在这里，我仅在object变量中捕获了元素，因为使用您正在使用的变量名称更有意义。

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

<强> DEMO

注意：如果您正在使用的浏览器支持模板文字，则animate功能的最后一行可以是：

object.style.left = `${x}px`;

Answer 3

您需要在声明的末尾包含样式

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

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