How to get width and height of browser window when resize?

If you want to get width and height of browser window when window resize, you just use a DOM event called onresize

How to use? Let see the example bellow:

In your HTML file:



onResize function:
function onResize() {
  const w = window.outerWidth;
  const h = window.outerHeight;
  const result = "width: " + w + " and height: " + h;
  console.log(result)
}


Explanations:
We add a DOM event called onresize into body tag, this event occurs when the browser window has been resized and call onResize function that we defined.
Inside onResize function, we use outerWidth and outerHeight properties of the window to get window's width and height.

- The outerWidth property will returns the outer width of the browser window, including all interface elements (tool bars, scroll bars, bookmarks bars...).
- The outerHeight property will returns the outer height of the browser window, including all interface elements (tool bars, scroll bars, bookmarks bars...).

Note:
- You can use clientWidth, clientHeight, innerWidth, innerHeight, offsetWidth and/or offsetHeight properties to get another size of browser window.
- You can add resize event by Javascript instead HTML body tag like this:
window.addEventListener("resize", onResize); // The addEventListener() method is not supported in IE 8 or earlier versions.
// or 
window.onresize = onResize();


© 2019 4codev

Created with love by Sil.