调整大小后获取元素的宽度

Question

使用 $(el).css() 调整元素大小后是否可以获取元素的大小？

我的代码是：

function resize() {
    $(".combobox").css('width', '100%');
    var width = $(".combobox").width();
}

只有在第二次调用该函数后，我才获得组合框的实际值。第一次是在执行 $(".combobox").css('width', '100%'); 之前获取宽度

我认为这是 .css() 之后没有重新创建 DOM 的错误。有没有办法强制 DOM 重新加载？

提前致谢！

Answer 1

尝试链接两个函数：

function resize() {
    var width = $(".combobox").css('width', '100%').width();
}

Answer 2

尝试将获取宽度的代码部分放入计划为 1 毫秒的计时器中...

在执行脚本时，浏览器不会执行调整大小计算。如果你安排一个计时器并退出 JS 函数，浏览器将更新所有已更改的 DOM 元素的状态，然后启动计时器，因此此时组合框的宽度已更新。

我在基于 GWT 的网页中使用了非常类似的东西。

这个技巧不仅适用于 JS，而且适用于许多 GUI 框架，这些框架以延迟的方式进行布局。