getting computed style for Img width and height
in [JavaScript]
|
Prev: Need help with rounding on a calculation
Next: Avoiding an Infinite Loop in Arbitrary eval(user_code)
From: liketofindoutwhy on 22 Apr 2008 21:20 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?
From: Joost Diepenmaat on 23 Apr 2008 01:59 liketofindoutwhy <liketofindoutwhy(a)gmail.com> writes: > 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/
From: liketofindoutwhy on 24 Apr 2008 05:39
On Apr 22, 10:59 pm, Joost Diepenmaat <jo...(a)zeekat.nl> wrote: > liketofindoutwhy <liketofindout...(a)gmail.com> writes: > > 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. |