workaround to read proper dimension when display : 'none'

Are there any workarounds to read proper element dimensions when it's display value is set to none?

Well, one would be to hide it without changing the display, but visibility property开发者_如何学编程 instead. While it gives proper dimensions, the element affects document flow.

One more way I can think of is opacity, but then the browser support kicks in.

The element I'm working with is appended to body.

Oh yes, I'm looking for computed style. There are no static CSS properties set for dimensions etc.

Any other solutions?

When display is none, by definition elements non-block elements have no dimensions. (Thanks, @Pekka) One potential way around this is to position the element far off-screen by setting position: absolute and left: -999em. The element will still exist so you can get its dimensions, but it won't appear in the document and should not affect flow.

There is a way to do it with offsetHeight and javascript

<script type="text/javascript">
<!--
onload=function() {

var divh = document.getElementById('top').offsetHeight;

     alert(divh +"px");

 }
//-->
</script>