追加后的DIV宽度是否计算错误？

Question

在我正在编写的脚本中,我将一个反馈表单的标记附加到正文,然后使用jQuery将该元素(一个DIV)集中在屏幕上.在下面的代码示例中,form_code保存了我的表单标记.#feedback_form定义的CSS样式明确定义了宽度.但是,在追加后立即调用的width()计算错误,返回的维度几乎等于页面的整个宽度.

如果我用控制台警告宽度,即使几秒钟后,它也会正确计算.从来没有碰到这个,有人可以对此有所了解吗？

jQuery('body').append(form_code);
alert(jQuery("#feedback_form").css("width"));

Answer 1

您的Javascript代码在与呈现HTML的线程不同的线程中运行.如果在添加新代码后立即查询宽度,则渲染线程将没有时间重新布局页面,因此您可以获得旧的,或者可能是中间宽度.

我不确定这种情况是否适用于较新的浏览器,但肯定是旧版本是合作多任务处理,因此在您明确暂停以允许更新之前,页面不会更新.

如果您使用以下代码,您会发现它有效,因为零秒暂停实际上允许浏览器处理重新渲染事件.

function show_width() {
    alert(jQuery("#feedback_form").css("width"));
}
setTimeout(show_width, 0);