![]() Reading the size of an element forces the browser to immediately and synchronously calculate its size, which forces the entire page to undergo layout and style calculations. Each of these values will be calculated for the box size specified by the property being accessed.What makes it worse is that you’re probably going to pair the resize event with some logic to read the size of an element on the screen, such as with element.clientWidth, element.getBoundingClientRect(), or getComputedStyle(). 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
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |