Klaus said:
How can I reliably detect the height of a div after having resized the
window (causing the contents of the div to become reflowed)? [...]
Assume this renders on one line. I can get the height as
getElementById['content'].offsetHeight, let's say it's 18 (px).
No, you can't. offsetHeight is not part of the current DOM, it
is legacy ('DOM 0') from before W3C standards.
According to the Mozilla site:
"offsetHeight gets the number of pixels that the current
element is offset within the offsetParent node"
<URL:
http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html#1027994>
In other words, you are finding the distance from the top of
your element to the bottom of its offset parent, which might be
the same value as the height of the element, but likely not.
Have a read here:
Then I make the window so narrow that 'content' gets reflowed
to display as:
bla,
bla,
bla!
Now I'd like to detect the new height, but .offsetHeight is still 18 - in
Only if some element above has not re-flowed and moved this
element down the page, increasing its offsetHeight value.
Opera and FF. In IE, it does show the new height (say, 36), but when
resizing back to 18, IE's .offsetHeight is stuck at 36.
Without seeing the HTML for the entire page (or at least to
where your element is), we can only guess as to why.
If you want to find the height of an element, there are several
ways:
1. obj.style.height - this will tell you what the actual height
property of the style object has been set at, either inline
or by scripting but not CSS. If style.height has not been set
by one of these methods, it is undefined.
2. the element's height attribute, however this is only
available for a limited set of elements (iframe, td, th, img,
object and applet), so it can't be used for a row.
3. via script: getCurentStyle (IE) or getComputedStyle (the
rest). However, if it has been set using something other
than px (say em or %), IE will report whatever the units it's
been set at. So if your element has its height set as %,
then that is what IE reports. If the height is not set at
all, IE reports 'auto' whereas Firefox gives the size in
pixels always.
Below is a script to let you play with things:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>blah</title>
<script type="text/javascript">
function sayWH(a) {
var txt = '';
while (!/table/i.test(a.nodeName)){
txt += theWH(a) + '<br><br>';
a = a.parentNode;
}
// txt = txt.replace(/\\n/,'<br>');
document.getElementById('report').innerHTML = txt;
}
function theWH(a) {
var msg= a.nodeName + ':';
// Check if attributes set:
if (a.height || a.width) {
msg += '<br><br>Height attribute: ' + a.height;
msg += '<br>Width attribute: ' + a.width;
} else {
msg += '<br><br>Element height/width attribute: undefined';
}
// Check if style attributes set:
if (a.style) {
msg += '<br><br>Height style attribute: ';
msg += (a.style.height)? a.style.height : 'not set';
msg += '<br>Width style attribute: ';
msg += (a.style.width)? a.style.width : 'not set';
} else {
msg += '<br><br>Style object not supported here';
}
// Zilla: getComputedStyle
if (window.getComputedStyle) {
var h = document.defaultView.getComputedStyle(a,
'').getPropertyValue('height');
var w = document.defaultView.getComputedStyle(a,
'').getPropertyValue('width');
msg += '<br><br>Using getComputedStyle (h,w): '
+ h + ', ' + w;
// IE: currentStyle
} else if (a.currentStyle) {
var h = eval('a.currentStyle.height');
var w = eval('a.currentStyle.width');
msg += '<br><br>Using currentStyle (h,w): ' + h + ', ' + w;
}
return msg;
}
function initPage(){
var d = document.getElementsByTagName('div');
var i = d.length;
while (i--){
d
.onclick = function(){sayWH(this);};
}
var e = document.getElementById('aDiv');
e.style.height = '5em';
e.style.width = '35em';
}
</script>
<style type="text/css">
div {border: 1px solid red;}
..aClass {width: 20em; height: 10em;
line-height: 10em;}
#report {font-family: sans-serif; color: #666;
font-size: 90%;}
</style>
</head>
<body onload="initPage();">
<table border="1"><tr><td>
<div>This div: height and width not set at all</div>
</td></tr><tr><td>
<div class="aClass">This div: height and width set using
CSS class</div>
</td></tr><tr><td style="height: 30px; width: 400px">
<div style="width: 95%; height: 95%;">This div: height and
width attributes set using inline style and precentage<br>
<br><br></div>
</td></tr><tr><td height="20%" width="50%">
<div id="aDiv">This div: style height and width set using
script</div>
</td></tr></table>
<span id="report"></span>
</body>
</html>