By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,516 Members | 1,148 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,516 IT Pros & Developers. It's quick & easy.

getting computed style for Img width and height

P: n/a
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?
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
liketofindoutwhy <li**************@gmail.comwrites:
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.

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/
Jun 27 '08 #2

P: n/a
On Apr 22, 10:59 pm, Joost Diepenmaat <jo...@zeekat.nlwrote:
liketofindoutwhy <liketofindout...@gmail.comwrites:
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.
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.

Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.