Javascript 无法在codepen中设置DOM元素的动画

我只想每x毫秒设置一个形状的动画。我是在做这件事

我尝试使用以下方法移动它：

JavaScript:

• ball.getBoundingClientRect（）.left+=100+'px'

• ball.style.left+=100+'px'

jQuery：

• $（“#ball”）.position（）.left+=100+“px”

但似乎什么都不起作用。球出现，但不移动。也正在调用超时。控制台中没有抛出错误

var ball = null;
var ball_x = null;
var ball_y = null;

function doMove() {
  ball.style.left += 100 + 'px';
  setTimeout(doMove,100); 
}

function init() {
  ball = document.getElementById('ball');
  ball_x = ball.getBoundingClientRect().left; //displays correct location
  ball_y = ball.getBoundingClientRect().top; //displays correct location

  doMove();
}

window.onload = init;

CSS:

HTML:

---

问题是

left

css返回一个类似于

100px

值的文本，而不是一个数字值，因此不起作用。因此，使用

+=

进行字符串连接，而不是数字连接，从而创建无效值

返回只读对象，因此更改其属性不会产生效果

返回的值是一个DOMRect对象，其中包含只读left， 以像素为单位描述边框框的顶部、右侧和底部属性。 “顶”和“左”相对于视口的左上角

var-ball=null；
函数doMove（）{
ball.style.left=（（parseInt（ball.style.left）| | 0）+100）+“px”
设置超时（doMove，2000）；
}
函数init（）{
ball=document.getElementById（'ball'）；
doMove（）；
}
window.onload=init
球{
宽度：25px；
高度：25px；
背景色：红色；
边界半径：50%；
位置：绝对位置；
左：100px；
顶部：200px；
过渡：左2秒；
}

codepen URL在哪里？@RayonDabre请参见上文

getBoundingClientRect（）

是只读属性。@RayonDabre那么我尝试过的其他两种方法呢？如此快速准确#尊重

#ball {
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  left: 100px;
  top: 200px;
}

<div>
  <div id='ball'></div>
</div>