If the writing mode of your document is vertical, though, the blockSize will define the width while the inlineSize will define the height. The blockSize property defines the height of the element while the inlineSize defines the width.

Each of these properties will be an array that will almost always contain just one value which is an object with a blockSize and inlineSize property. These properties are borderBoxSize, contentBoxSize, and devicePixelContentBoxSize, and they perfectly line up with the 3 different box model types discussed earlier. There are also 3 additional properties that all provide additional information about the width/height of the element. The most important properties are the target and contentRect since they tell you the majority of the information you need to know about which element is resizing and what its new size is. The entries array in the Resize Observer callback contains lots of useful information about the element. Const observer = new ResizeObserver ( entries => ) Resize Observer Entry Get exclusive access to writing opportunities and advice in our community Discord. Or we can use the ResizeObserver constructor to create an object that lets us watch an element for resizing. 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. We can watch window resize events with JavaScript to detect screen size changes of any kind.

Javascript on resize