关于空div插入一段html代码，然后获取这个div的高度的问题

Question

现在页面有个空div，我用js向里面插入一段html,然后获取div的高度，发现有时候得到的div的高度不准确，请问各位有什么方法解决一下。

Answer 1

贴代码出来，不然也不知道什么情况

Answer 2

获取之前加上一行 document.body.scrollHeight; 强制清空布局队列

Answer 3

用js向里面插入一段html,然后获取div的高度

注意要在 DOM 渲染完成后再获取高度，可以使用

.addEventListener('DOMContentLoaded',function(){    // .attachEvent (IE 6、7、8)

或

setTimeout(() => { .. }, 0)

Answer 4

因为插入dom，再渲染出来是需要时间的，有时候在你获取高度的时候渲染还没有完成（尤其是在你刚执行完插入dom逻辑又紧接着执行了获取高度的方法）。所以就会造成获取高度不正确的问题！

可以加个定时器：

setTimeout(() => {
  // 获取高度的代码...
}, 20);

Answer 5

dom操作导致Reflow，如果你插入的是块级元素，是不会存在这种问题的（网页渲染过程：html->css->js）。但如果你插入行内元素（特别是图片），前面的html->css操作并没有赋予高度，那么高度只能在渲染过程中体现，而你获取高度的时候并没有渲染完成，所以就会导致高度问题。解决方法大神们已经给出，通过setTimeout 延时获取高度。一切没有代码的回答都是耍流氓，图片自行添加。

<div class="bgImg"></div>

<script>
    var odiv = document.getElementById('bgImg');
    odiv.innerHTML = '<img src="test.jpg">'
    
    setTimeout(() => {
        var oHeight = odiv.scrollHeight;
        console.log(oHeight);
    },100)
</script>