Results 1 to 3 of 3

Thread: Pre-calculate width of element before adding it to document tree

  1. #1
    Join Date
    Oct 2011

    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.

  2. #2
    Join Date
    Feb 2006
    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.
    Last edited by mrhoo; 10-20-2011 at 09:11 PM.

  3. #3
    Join Date
    Oct 2011
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center