Get image height in IE of display:none image?

I have images who are set to display:none. I am using javascript (document.getElementById('elem').height) to get the height/width of these images.

This works in other browsers, bu开发者_如何转开发t IE reports the height to be 0 (presumably due to the fact that its display is set to none - because when I remove the display:none, the height is reported correctly). I tried wrapping the images in a div and setting the div's display to none instead of the images - but this didn't work either.

What is the typical work around for this?

If you are interested in the size of the image itself, apart from any styles or attributes set in the html, you can measure a new Image with the same src.

It doesn't add anything to the document's html or stylesheets, or even to document.images.length if you are only testing included images.

var  im=new Image();
im.src=element.src;
return [im.src,  im.width, im.height];

you could use visibility: hidden;, maybe in combination with position:absolute too prevent "flickering" which you will remove after reading out the height.

Try this:

1. Position it offscreen
2. set it to display:block
3. get its height
4. set it back to display:none
5. re-position it back where it was

display:none; elements are defined as not having any display properties, so height and width shouldn't be used while it's in this state.

You could try setting it to visibility:hidden;, which would retain height and width. The downside of this is that visibility doesn't affect it's position in the page flow, so it will also retain the space it takes up in the layout. You could counter-act that by setting the position to either absolute or fixed to take it out of the context flow. You may also want to set the z-index to a negative value to ensure it gets hidden behind the rest of the page elements, otherwise it might block other elements from being clicked, etc, even though it would be invisible.