We can listen to resize events by assigning a resize event listener to the window object. We can select it with document.querySelector. If we want to watch the browser window’s resizing, then we can watch the html element.

Then we call ro.observe with the element that we’re watching. Top and left have the x and y coordinates of the top left corner respectively.Įntry.target has the element we’re watching. Width and height have the width and height of the element. We invoke the ResizeObserver constructor with a function that loops through the entries whyich has the items we’re watching.Īnd in the loop body, we get the dimensions from the ntentRect property. One way to add an event handler for the window resize event is to assign an event handler function to the window.onresize property.įor instance, we can write: window.onresize = (event) => ) ro.observe(document.querySelector('html')) Assign an Event Handler to the window.onresize Property In this article, we’ll look at how to watch the JavaScript window resize event to detect window resizes. Please check out the tutorial on JavaScript event listeners to learn more about it.We can watch window resize events with JavaScript to detect screen size changes of any kind. You should better assign a new event handler to the resize event using event listener, as shown in the example above. You should avoid using the solution like window.onresize = function(event), since it overrides the window.onresize event handler function. Note: Please resize the browser window to see how it works. Calling the function for the first time Window.addEventListener('resize', displayWindowSize) Attaching the event listener function to window's resize event

Var h = ĭocument.getElementById('result').innerHTML = 'Width: ' + w + ', ' + 'Height: ' + h Get width and height of the window excluding scrollbars

Js on resize