S
steveh
Hi,
I am basically trying to find the location and size of an element on
the page, and draw a div on top with the identical size and location
(with some transparency), so it can be highlighted and clicked. Now I
*thought* I had managed the width/height using offsetWidth/
offsetHeight since when I initially tested it (using basic text) in
IE6 and Firefox 2, it worked fine.
However I have justed tested it with child elements (see code below),
and whilst it still works in IE6, Firefox doesn't return the value I
expect. It appears that if the height of a child element is larger
then the container, it is not reflected in the container's
offsetHeight.
Some elements may have a height and width defined in their style, so
that's not a problem. But not all will, so I really need a way to get
the browsers rendered height for an element.
The demo code I am using is below- and yes, its a rough example
<html>
<head>
<script>
function Start()
{
var containerHeight =
document.getElementById('region1').offsetHeight;
var childHeight =
document.getElementById('region1').childNodes[0].offsetHeight;
var info = document.getElementById('info');
info.innerHTML = 'Container offsetHeight: ' + containerHeight + '<br/
childHeight;
}
</script>
</head>
<body onload="Start();">
<br/><br/>
<span id="region1"><span style="font-size: 50px;">Test text</span></
span>
<br/>
<br/>
<span id="info" runat="server">
</span>
</body>
</html>
So my questions are:
- What should the behaviour be. Is IE or Firefox correct?
- Is there a way around it, to get the actual 'height'?*
*I know if there was a single child element, I could just get that
offsetHeight - but there could potentially be many, and they may
contain children too - so this isn't really an option.
Thanks
Steve
I am basically trying to find the location and size of an element on
the page, and draw a div on top with the identical size and location
(with some transparency), so it can be highlighted and clicked. Now I
*thought* I had managed the width/height using offsetWidth/
offsetHeight since when I initially tested it (using basic text) in
IE6 and Firefox 2, it worked fine.
However I have justed tested it with child elements (see code below),
and whilst it still works in IE6, Firefox doesn't return the value I
expect. It appears that if the height of a child element is larger
then the container, it is not reflected in the container's
offsetHeight.
Some elements may have a height and width defined in their style, so
that's not a problem. But not all will, so I really need a way to get
the browsers rendered height for an element.
The demo code I am using is below- and yes, its a rough example
<html>
<head>
<script>
function Start()
{
var containerHeight =
document.getElementById('region1').offsetHeight;
var childHeight =
document.getElementById('region1').childNodes[0].offsetHeight;
var info = document.getElementById('info');
info.innerHTML = 'Container offsetHeight: ' + containerHeight + '<br/
childHeight;
}
</script>
</head>
<body onload="Start();">
<br/><br/>
<span id="region1"><span style="font-size: 50px;">Test text</span></
span>
<br/>
<br/>
<span id="info" runat="server">
</span>
</body>
</html>
So my questions are:
- What should the behaviour be. Is IE or Firefox correct?
- Is there a way around it, to get the actual 'height'?*
*I know if there was a single child element, I could just get that
offsetHeight - but there could potentially be many, and they may
contain children too - so this isn't really an option.
Thanks
Steve