How to get the actual width and height of the root node in html?

Question

<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>

As in the above code, the width and height values corresponding to the window zoom will also change. The actual width and height cannot be obtained when there is a scroll bar. What I want to obtain is the current visible area plus the area hidden by the scroll bar, no matter how the window changes, the width and height Should be immobile

Have you tried `.outerWidth()`? I'm not sure if it'll fix your problem but it might be worth a shot! — OOPS Studio, Jan 16 '21 at 09:38
will it work if you get the 'body' tag's BoundingClientRect? — HW Siew, Jan 16 '21 at 09:52
https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height — ridhesh walavalkar, Jan 16 '21 at 10:17
It already had width and height with space hide by screen. When you `ctrl + shift + C` then you can check the width and height had space with hidden space by scroll. — jacobkim, Jan 16 '21 at 12:06

Shashikant Yadav - Kantbtrue · Accepted Answer · 2021-01-16T10:25:26.960

You can use offsetWidth and 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>

score 0 · Answer 2 · edited Jan 16 '21 at 16:56

0

You should replace html with body.

document.querySelector('body');

edited Jan 16 '21 at 16:56

zhulien

5,145
3
22
36

answered Jan 16 '21 at 10:31

水秋玄

1

score 0 · Answer 3 · edited Feb 06 '21 at 11:00

window.onresize = function(){


  document.getElementById("123").innerHTML= JSON.stringify({"width" : document.body.scrollWidth , "height" : document.body.scrollHeight}) 
}

<html>
 <head> 
  <meta charset="utf-8" /> 
  <title>test</title> 
 </head> 
 <body style="background-color: red;width: auto;height: 100vh" id="123">  

 </body>
</html>

Edit: The above code will solve your issue, use body.scrollWidth instead of clientWidth

How to get the actual width and height of the root node in html?

3 Answers3