在IE中将其设置为自动后获取div的高度

Question

I'm writing some JavaScript that changes the size of some content. To do this I need to know the size of a div within my content. If I have the following html:

<div id="wrapper">
   ... other stuff ...
   <div id="inner" style="height:400px">Some text in here</div>
   ... other stuff ...
</div>

And the following JavaScript:

$('#inner').height('auto');
var height = $("#wrapper").height();

In FireFox and Chrome the height variable increases as the inner div expands to fit all the text. In IE this stays the same. I guess it doesn't redraw the div straight away. Anybody know how to get the new correct height in IE?

Cheers

Answer 1

问题在于该元素不会立即重绘，因此您需要异步测量高度-设置一个0毫秒的超时值来测量它并继续执行。

Answer 2

Try it this way:

$(function() {
  $('#inner').height('auto');
  var height = $("#wrapper").height();
});

Wrapping it in $(function() { }); makes it wait for the DOM to render before running the script. It's probably a good idea to put anything that needs access to the DOM immediately after render inside that function.