javascript - 如何在循环中使用“getElementById”？

Question

我正在尝试在循环中使用以下 html DOM：

document.getElementById('someID').style.marginLeft = mov + "%";

当用户单击按钮时，我想这样做以使 div 移动。'mov' 是可变的，但它不起作用。

我怎样才能实现它？

谢谢你们。

Answer 1

使用 CSS

#someID {
    margin-left: 100px;
    transition: 1s ease-out;
}
#someID.moveit {
    margin-left: 500px;
    transition: 1s ease-out;
}

然后将.moveit类添加到#someID单击发生的时间。

Answer 2

var pos = 50;

setInterval(function(){
  document.getElementById("someID").style.left=pos+"%";
},200);

document.body.onclick=function(e){
  pos = e.pageX/10 // window.innerWidth;
}

#someID{
  position:absolute;
  top:10%;
  left:50%;
  background-color:red;
  width:50px;
  height:50px;
}

body{
  height:800px;  
}

<div id="someID">  </div>

有一个简单的例子。

希望能帮助到你。