javascript - Div 不会被 JavaScript 调整大小

Question

这一定看起来像一个荒谬的问题，尤其是当这是我的工作时，但有一些关于 CSS 和 JavaScript 定位和大小的微妙之处我不了解。

我有一个“动画化”对象的函数(使用给定的缓动函数更改它们的属性)。每次动画进行时，都会调用一个应该调整测试 div 大小的回调，但 div 保持原样。它一定很简单，但我就是不明白。

这是一个 fiddle :http://jsfiddle.net/sd9tJ/

还有一段代码，这样我就可以提交问题了:D

$(document).ready(function() {

    var surface = {w : 100, h : 100};

    var $div = $('#test');

    $t.animate(surface, {w : 200, h : 200}, 2000, $t.easing.linear, function() {
        document.body.innerHTML += '('+Math.round(surface.w)+'/'+Math.round(surface.h)+')';
        $div.css({
            width  : Math.round(surface.w) + 'px',
            height : Math.round(surface.h) + 'px'
        });
    });
});

值是正确的，但样式不想更新，所以我认为它与 CSS 相关。

有什么想法吗？

谢谢你的帮助:)

Answer 1

问题在于调试技术:

    document.body.innerHTML += ... ;

这会获取 <div> 的原始 HTML并重新添加它，因为它最初位于页面加载时。将其取出，一切正常。

编辑 — 使用 $('#test') 一切正常的原因在处理程序中是它导致 jQuery 出去并再次找到元素。因此，它会找到更新的那个，然后一切正常。

像这样添加到文档中会导致问题的原因是它与以下内容相同:

    document.body.innerHTML = document.body.innerHTML + whatever;

获取当前 innerHTML为您提供页面没有样式更新的元素。然后它重新创建整个页面 DOM。使用 console.log() ，或者在页面上制作一个特殊元素并单独更新其 HTML。