Is there a way to find the size of a <div> element where the height
either hasn't been specified or is set to 'auto'?
document.getElementById('myId').style.height returns either nothing or
'auto'.
And it shouldn't do anything but that. The style object represents inline
styles: those set by the style attribute or modification of the style
object itself. What you need is the calculated (computed) style.
In DOM-compliant browsers, you can use the getComputedStyle method to
return a computed style object. In IE (and other browsers that decided to
implement it), you can use offsetHeight:
<div id="myDiv">
Some content
</div>
<!-- Add BR elements to easily see changes -->
var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all
|| null;};
}
function test() {
var d = getRefById('myDiv'), h = '0px', o;
if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
}
Note that the value, h, is a string, not a number. This is because CSS
lengths can be specified in various units. However, all my tests returned
values in pixels.
Hope that helps,
Mike
