When do elements get their style attribute values?

[Tim Streater]

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.

 

[richard]

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.

 

[Tim Streater]

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.