首页 > 解决方案 > 使用 XML HttpRequest 更新 innerHTML 后元素高度不会改变

问题描述

下面的问题应该如何解决?

通过 XMLHttpRequest 更新 innerHTML 后,div 内容发生变化,但高度没有变化。

这是主文件:

<html>
<head>
<script>
    function loadpage() 
    {   
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() 
        {
            if (this.readyState == 4 && this.status == 200) 
            {
                document.getElementById("mydiv").innerHTML = this.responseText;
            }
        }

        xhttp.open("GET", "page.html", true);
        xhttp.send();

        document.title = document.getElementById("mydiv").clientHeight;
    }

</script>
</head>

<body>
    <div id="mydiv" onclick="loadpage()">hello</div>
</body>
</html>

这是文件 page.html

<html>
<body>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
</body>
</html>

标签: javascripthtmlajax

解决方案


使用“.innerHTML”后,您可能必须像这样强制重置高度:

document.getElementById("mydiv").style.height = ""

推荐阅读