Pre-calculate width of element before adding it to document tree
I couldn't find an answer for this...
I understand that if I have an element in my document tree, I can use getComputedStyle() to determine its width based on CSS styles.
I want to dynamically create some elements to populate a given div, but I want the size of these elements to be controllable via CSS. When dynamically populating the div, I need to determine how many elements will fit. Currently, I have to add an element to the div first so its size will be calculated, then I can base my calculations off of that. However, this seems like not a great way to do ti.
Is there some way to ask for the size of an element to be calculated as if it were part of the document tree? That way, I could make my changes all at once. Thanks.
An element does not have a size until it is added to the document. It is just a thought, basically, with no physical dimensions.
Its rendered size depends on the inherited sizes of its parents, all the way up the tree, as well as the view size.
You can add all your elements to a hidden div, with the same inheritance as your container, and chop it upusing
boundingRectangles or offsets or clientHeights- but elements have to exist in a document to be measured.
Yeah, I understand it has to exist in the document, which is why I asked if there was some way to pre-calculate it "as if" it were part of the document. Sort of like a "what if" scenario, where you could ask "what if I added this element here, how would its style be calculated?"
If I add something as hidden, would it still get its size calculated? Seems like in that case it would just be ignored, since it is hidden.