outerWidth(true）连续返回两次不同的值，而无需重新加载页面

outerWidth(true) returns different values two times in a row, without reloading the page

本文关键字：新加载加载返回连续 true 两次 outerWidth 更新时间：2023-09-26

我很困惑。

http://jsfiddle.net/pyn8s/

单击登录按钮。等待弹出窗口出现。注意它的位置。再次单击"登录"按钮。看着它向左移动。（正确位置）再次单击"登录"按钮。请注意，它不再移动。

我很茫然，甚至不知道如何描述这种奇怪的行为。我注意到 note.outerWidth（true）上的警报表明，它在前两次登录单击时报告了不同的宽度，但该对象永远不会不可见，并且在调用 outerWidth 之前应该设置它的宽度......

当 jQuery 第一次计算 note.outerWidth（）时，它会得到它的父宽度（loginForm = 250px），因为 notes 的宽度没有在 css 中定义（只定义了最大宽度）。

浏览器在 .append（）之后呈现新的注释内容，但其新宽度是在 .offset（）之后计算的：

请参阅控制台日志：http://jsfiddle.net/HighKickX/QSsV6/

max-width + 2 * (padding + border-width)

=

300px + 2 * （5px + 1px） = 312px

当您再次单击时，偏移量将根据 312px 而不是 250px 计算。这就是为什么笔记会移动到另一个位置。

解决方案1：删除"位置：绝对"http://jsfiddle.net/HighKickX/wjeGF/

解释：如果您设置了位置：绝对，则注释将从流程中删除，并且不再从loginForm继承250px的宽度。因此，它的宽度不限于 250px，而是最大宽度为 300px + 填充 + 边框 = 312px。如果您不设置位置：绝对，则注释的宽度将被继承并等于 250px（始终）。

解决方案2：设置默认宽度 http://jsfiddle.net/HighKickX/Ex3Bp/