When do elements get their style attribute values?

Discussion in 'HTML' started by Tim Streater, Jul 11, 2011.

  1. Tim Streater

    Tim Streater Guest

    There are some elements in one of my app's pages whose height values I'd
    like to get as soon as possible, since I want to use the values to
    calculate and set heights of other elements. And I'd like to be able to
    either get the element's natural height or one I set using CSS.

    So, I'm doing something like [1]:

    h =
    document.defaultView.getComputedStyle(e,null).getPropertyValue("height");

    where e is a pointer to my element.

    But I find that if I do this right at the start of the onload function,
    I get back a zero value, whereas if I do it a bit later (e.g. after
    waiting for some ajax calls to complete), then I get the proper value.

    So when are these style values set? The reason for this is to avoid what
    I do at the moment: compute the true height by hand and just have a
    JavaScript variable initialised to that value.


    [1] If/when I can sort this I can collect the border/margin/padding
    values too.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Jul 11, 2011
    #1
    1. Advertising

  2. Tim Streater

    richard Guest

    On Mon, 11 Jul 2011 16:24:27 +0100, Tim Streater wrote:

    > There are some elements in one of my app's pages whose height values I'd
    > like to get as soon as possible, since I want to use the values to
    > calculate and set heights of other elements. And I'd like to be able to
    > either get the element's natural height or one I set using CSS.
    >
    > So, I'm doing something like [1]:
    >
    > h =
    > document.defaultView.getComputedStyle(e,null).getPropertyValue("height");
    >
    > where e is a pointer to my element.
    >
    > But I find that if I do this right at the start of the onload function,
    > I get back a zero value, whereas if I do it a bit later (e.g. after
    > waiting for some ajax calls to complete), then I get the proper value.
    >
    > So when are these style values set? The reason for this is to avoid what
    > I do at the moment: compute the true height by hand and just have a
    > JavaScript variable initialised to that value.
    >
    >
    > [1] If/when I can sort this I can collect the border/margin/padding
    > values too.


    I think your question would be more suited in a javascript group.
    Posting a link to a working example wouldn't hurt.
    Personally, I wouldn't use JS to set style values.
    richard, Jul 11, 2011
    #2
    1. Advertising

  3. Tim Streater

    Tim Streater Guest

    In article <>,
    richard <> wrote:

    > On Mon, 11 Jul 2011 16:24:27 +0100, Tim Streater wrote:
    >
    > > There are some elements in one of my app's pages whose height values I'd
    > > like to get as soon as possible, since I want to use the values to
    > > calculate and set heights of other elements. And I'd like to be able to
    > > either get the element's natural height or one I set using CSS.
    > >
    > > So, I'm doing something like [1]:
    > >
    > > h =
    > > document.defaultView.getComputedStyle(e,null).getPropertyValue("height");
    > >
    > > where e is a pointer to my element.
    > >
    > > But I find that if I do this right at the start of the onload function,
    > > I get back a zero value, whereas if I do it a bit later (e.g. after
    > > waiting for some ajax calls to complete), then I get the proper value.
    > >
    > > So when are these style values set? The reason for this is to avoid what
    > > I do at the moment: compute the true height by hand and just have a
    > > JavaScript variable initialised to that value.
    > >
    > >
    > > [1] If/when I can sort this I can collect the border/margin/padding
    > > values too.

    >
    > I think your question would be more suited in a javascript group.


    Not necessarily. This is basically a question about when DOM element
    styles become accessible.

    > Posting a link to a working example wouldn't hurt.


    No URL is available as in this case, the client and server are on the
    same machine. The only URL would be localhost which is not too useful.

    > Personally, I wouldn't use JS to set style values.


    The user has the ability to grab a particular element (a species of
    grab-bar) with the mouse and expects to be able to move it up (down). To
    effect this, the element above needs to get shorter (taller) and the
    element below needs to get taller (shorter). At the moment I do this
    with JavaScript, suggestions for alternatives welcome.

    --
    Tim

    "That excessive bail ought not to be required, nor excessive fines imposed,
    nor cruel and unusual punishments inflicted" -- Bill of Rights 1689
    Tim Streater, Jul 11, 2011
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    2
    Views:
    1,062
    Henry S. Thompson
    Mar 6, 2006
  2. Eric Bednarz
    Replies:
    3
    Views:
    951
    Mike S
    Nov 5, 2010
  3. Lewis
    Replies:
    1
    Views:
    398
    Jukka K. Korpela
    Nov 9, 2010
  4. Sebastian Fey
    Replies:
    0
    Views:
    69
    Sebastian Fey
    Apr 28, 2006
  5. Tim Streater
    Replies:
    24
    Views:
    231
    dhtml
    Jul 18, 2011
Loading...

Share This Page