getting computed style for Img width and height

[liketofindoutwhy]

For Firefox, we can get the computed style of an Img element, using
the script in

http://www.quirksmode.org/dom/getstyles.html

so even if we set only the width of an Image in CSS, we will get both
the width and height of the final rendered image.

However, it won't work in IE 7.... the width will return the original
value, but the height is "NaN".... is there a way to get the final
rendered width and height of an image in both Firefox and IE?

 

[Joost Diepenmaat]

For Firefox, we can get the computed style of an Img element, using
the script in

http://www.quirksmode.org/dom/getstyles.html

so even if we set only the width of an Image in CSS, we will get both
the width and height of the final rendered image.

I would use offsetHeight / offsetWidth for that instead. I'm not
convinced width and height *should* be part of the computed style, and
also, computed styles may be returned *any* supported unit, while
offsets are always given in pixels (which is usually what you want).

Offsets are mentioned in the first paragraph of javascript code on the
page you linked.

However, it won't work in IE 7.... the width will return the original
value, but the height is "NaN".... is there a way to get the final
rendered width and height of an image in both Firefox and IE?

Re-read that page.

 

[liketofindoutwhy]

I would use offsetHeight / offsetWidth for that instead. I'm not
convinced width and height *should* be part of the computed style, and
also, computed styles may be returned *any* supported unit, while
offsets are always given in pixels (which is usually what you want).

Offsets are mentioned in the first paragraph of javascript code on the
page you linked.


Re-read that page.

eh, that's right, offsetWidth and offsetHeight do work... and
clientWidth, scrollWidth also work... I wonder why the later 2 are
less known and not even in the Definitive Javascript book.
clientWidth is more accurate width for the image as it doesn't include
the border, if any, for the image. scrollWidth is always the same as
offsetWidth even if i resize my window... i can't make them different.