In the above code, we added a span with text Width.
This shows that you can respond to changes in an element's size, even if they have nothing to do with the viewport.
For example, let’s add an event to the object window to get its width and height and show it on the web page. In the resize-observer-text.html ( see source) example, we use the resize observer to change the font-size of a header and paragraph as a slider's value is changed causing the containingThis function adds an event that contains a function to an object. If the writing mode of your document is vertical, though, the blockSize will define the width while the inlineSize will define the height. To add a resize event to the window, we can use the addEventListener () function in JavaScript. His journey continues when he pulls out an empty sheet of paper. Definition and Usage The onresize event occurs when the browser window has been resized.
The blockSize property defines the height of the element while the inlineSize defines the width. The final result Just as planned He smiled and switches to the JS code. Execute a JavaScript when the browser window is resized: Try it Yourself More 'Try it Yourself' examples below. In addition, it not only supports the event on the document but also on arbitrary elements. 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. It is a browser-native solution that has a much better performance than to use the resize event. These properties are borderBoxSize, contentBoxSize, and devicePixelContentBoxSize, and they perfectly line up with the 3 different box model types discussed earlier.
Example Try resizing the below