如何获取HTML中根节点的实际宽度和高度？

许基目

<html>
    <head> 
        <meta charset="utf-8" /> 
        <title>test</title> 
    </head> 
    <body style="background-color: red;width: 100vw;height: 100vh" id="123">  
        <script>
            window.onresize = function() {
                var res = document.getElementsByTagName('html')[0].getBoundingClientRect();
                document.getElementById("123").innerHTML=JSON.stringify(res)
            }
        </script> 
    </body>
</html>

与上面的代码一样，与窗口缩放相对应的宽度和高度值也将更改。有滚动条时无法获得实际的宽度和高度。我想要获得的是当前可见区域加上滚动条隐藏的区域，无论窗口如何变化，其宽度和高度均应保持不变

坎特伯雷

您可以使用offsetWidth和offsetHeight

<html>
    <head> 
        <meta charset="utf-8" /> 
        <title>test</title> 
    </head> 
    <body style="background-color: red;width: 100vw;height: 100vh">
        <div id="123"></div>  
        <script>
            window.onresize = function() {
                document.getElementById("123").innerHTML = document.getElementsByTagName('html')[0].offsetWidth + 'x' + document.getElementsByTagName('html')[0].offsetHeight;
            }
        </script> 
    </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。