如何在基于javascript的动画中获得元素的最终大小

在我们的页面中，我们经常使用基于javascript的动画使元素移动/调整大小，其中大多数使用setTimeout或setInterval来更改元素的位置或大小：

例如：

function open() {
  var w=parseInt(foo.style.width);
  if(w>=200) clearTimeout(t);
  else{
    foo.style.width = +1+'px';
    t=setTimeout(open,20); // call doMove in 20msec
  }

}

function init() {
  foo = document.getElementById('dv'); // get the "foo" object
  foo.style.width = '0px'; // set its initial position to 0px
  open(); // start animating
}

上面的代码希望缓慢地显示divfoo，但正如您所看到的，我将div的maxwidth设置为200px以停止动画

但是，如果内容div的实际大小应该超过200，又如何呢

也就是说，我无法得到元素的最终宽度

一般的解决办法是什么

---

以下是：

使用各种计算方式中的一种。谷歌JavaScript计算宽度，会有很多结果。请先尝试offsetWidth属性。我记不清它的兼容性表了，但它在Chrome、Safari和IE8/9中肯定能工作。

使用修改后的代码，如下所示。它将继续扩展，直到元素达到其全宽

function open() { //See comment at OP
    var w = foo.offsetWidht; // offsetWidht NOT style.width
    var realWidth = foo.scrollWidth;
    if(w < 200 || w < realWidth) {
        foo.style.width = +1+'px';
        setTimeout(open, 20); // call doMove in 20msec
    }
}

---

另外，您不需要clearTimeout，因为再次调用函数时没有设置超时。

p.S.如果您在全局范围内，请不要调用open方法，因为它会破坏每个window.open调用。以防万一。但你不在全球范围内，对吗？：]如果大小为，请将步长设置为1px