Как получить окончательный размер элемента в анимации на основе JavaScript

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 в 200px, чтобы остановить анимацию.

Но что еслиреальный размер содержимого div должен быть больше 200?

То есть я не могу получить окончательную ширину элемента.

Какое общее решение?

Здесьэто живой пример :

Answer 1

Используйте модифицированный код, как показано ниже. Он будет продолжать расширяться, пока элемент не достигнет полной ширины.

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, поскольку при повторном вызове функции тайм-аут не был установлен.

Answer 2

Используйте один из различных методов вычисления стилей. Google "ширина вычислений JavaScript", и будет много результатов. Попробуйте свойство offsetWidth в первую очередь. Я не могу вспомнить таблицу совместимости, но она определенно работает в Chrome, Safari и IE8 / 9.