Question

在我们的页面中，我们经常使用基于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
}

上面的代码想慢慢地显示div＃foo，但正如你所看到的，我将div的maxwidth设置为200px以停止动画。

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

这就是说我无法获得元素的最终宽度。

一般解决方案是什么？

以下是live exmple：

Answer 1

使用各种计算样式的方法之一。 Google“JavaScript计算宽度”会有很多结果。首先尝试使用属性offsetWidth。我不太清楚它的兼容性表，但它肯定适用于Chrome，Safari和IE8 / 9。

Answer 2

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

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，因为再次调用该函数时未设置超时。

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

2 个答案: