使用clearInterval时div.width属性不生效的原因是什么？

• 原生普通DOM元素不存在width实例属性，代码中con.width取值为undefined，pos == undefined的判断永远不成立，因此计时器永远不会被清除。
• 你给容器设置的是百分比宽度，需要读取元素实际渲染后的像素宽度，才能和以像素为单位递增的pos值匹配。
• 全等判断==容错性低，若后续pos增量发生变化跳过匹配值，也会出现计时器无法停止的问题，推荐改用大于等于判断。

JS代码修正 #

将判断条件中的con.width替换为con.offsetWidth，该属性会返回元素实际渲染的像素宽度（包含边框、内边距），和定位用的像素单位完全匹配。如果需要避免正方形溢出容器，可以同时减去正方形自身的宽度，修正后代码如下：

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.offsetWidth - sq.offsetWidth){
      clearInterval(moving)
    } else {
      pos++
      sq.style.left = pos + "px";
    }
  }
}

theAll(square,container)

补充说明 #

如果不需要计算容器的边框和内边距，也可以用clientWidth代替offsetWidth，clientWidth仅包含内容宽度和内边距，可根据实际布局需求选择。

内容的提问来源于stack exchange，提问作者Sola.SA