How to get updated height and width in JavaScript?

Question

How can I constantly get the width and the height of the browser via javascript? Simply using document.body.clientWidth or window.innerWidth gives the width once the page is loaded.

However, how can one obtain the width and height updated whenever the user resizes the window?

Answer 1

but is it possible to get the width and height updated when the user resize the window.

Yes, using the resize event:

window.addEventListener("resize", function() {
    // Now, clientWidth and innerWidth and such have changed
}, false);

(There I'm using addEventListener. If you need to support older browsers, you can use the hookEvent function in this other answer instead.)

Answer 2

Try updating the dimensions on resize or on requestAnimationFrame

window.onresize = function(event) {
    ...
};