为什么在使用 clearInterval 时 div.width 不起作用?

Why does div.width not work when using clearInterval?

我使用 set 和 clearInterval 制作了一个移动到其容器宽度末端的正方形。 如果我将宽度添加为数字,它会停止,但是当我添加 container.width 时它不起作用:

var container = document.getElementById('container')
var square = document.getElementById('mySquare')

function theAll(sq,con){
var pos = 0;
var moving = setInterval(move,10)      
function move(){
  if(pos == con.width){
        clearInterval(moving)}
  else{
  pos++
  sq.style.left=pos + "px";}
  }}

  theAll(square,container)

#container{
  font-size: 100%;
  font-family: Comic Sans MS;
  background-color: blanchedalmond;
 border-radius: 5px;
 padding: 0; 
  width: 100%;
  height: 60%; 
  display: flex;
  flex-direction: column;    
  }
  #mySquare{
  width: 5%;
  height: 5%;
  background-color: blueviolet;
  position: relative;
  }

你可以试试把con.width换成con.offsetWidth

示例https://codepen.io/julien180/pen/JjJvqEd?editors=1111