在内容大小更改时获取更新的div大小

Question

我有一个包含几个内部div的div。在我的javascript / jQuery代码中，一个函数执行，它使用jQuery css（）函数更改内部div的大小。在第一个函数之后的另一个函数中，我需要读取外部div的大小。它的大小应根据其内容的大小增加而增加。

所以基本上它看起来像这样：

resizeInnerDivs();
//...do something else...
doSomethingWithOuterDivSize();

当输入doSomethingWithOuterDivSize时，IE8和IE9仍然获得外部div的旧大小。另一方面，IE10，Firefox和Chrome会返回更新的大小。

我认为IE8和IE9没有重新计算新的大小。我尝试用doSomethingWithOuterDivSize();电话打包setTimeout。如果我等待足够长的时间，我可以获得更好（但不一定正确）的大小值，具体取决于超时。

我可以以某种方式强制重新计算外部div吗？如何在IE8和IE9中获得正确的值？

Answer 1

你可能正在寻找这个：

$('.yourClass').width();
$('someElement').width();
$('#someId').width();
$('any valid jQuery/CSS selector').width();

资源：http://api.jquery.com/width/

$.width()将为您提供元素的计算宽度。

Answer 2

我猜你有这两个中的任何一个：

1. 内部div不会影响IE上的外部div宽度。
2. 在您尝试获取之前，内部div未完成渲染 外部div的宽度，因此你仍然可以得到旧的宽度。

您可以通过手动查询控制台中的宽度来检查：

console.log($('outer_div_selector').width())

如果这返回正确（更新）的宽度，那么您遇到问题＃2。你可以这样解决：

$('outer_div_selector').width(); // this will force rendering to finish before executing the next line
doSomethingWithOuterDivSize();

否则你有一个CSS问题（例如，确保所有浮动都被正确清除）。