DHTML Object Properties DHTML Objects
Retrieves the height of the object relative to the layout or coordinate parent, as given by the offsetParent property.
| HTML |
N/A |
| Script |
[ iHeight = ] object.offsetHeight |
| iHeight |
Integer representing the height, in pixels. |
The property is read-only with no default value.
Using a combination of offset* properties, you can determine the location, width, and height of an object by using the offsetLeft, offsetTop, offsetHeight, and offsetWidth properties. These numeric properties specify the physical coordinates and dimensions of the object relative to the object’s offset parent.
For more information on how to access the dimension and location of elements on the page through the document object model, see Measuring Element Dimension and Location.
The following document is a simple clock that adjusts the size of its readout to fit the current width and height of the document body.
<html>
<head>
<title>A Simple Clock</title>
<script language="JScript">
function startClock ( ) {
window.setInterval ( "Clock_Tick ( )", 1000 );
Clock_Tick ( );
}
var iRatio = 4;
function Clock_Tick ( ) {
var dToday = Date ( );
var sTime = s.substring ( 11,19 );
var iDocHeight = document.body.offsetHeight;
var iDocWidth = document.body.offsetWidth;
if ( ( iDocHeight*iRatio ) >iDocWidth )
iDocHeight = iDocWidth / iRatio;
document.all.MyTime.innerText = sTime;
document.all.MyTime.style.fontSize = iDocHeight;
}
</script>
<body onload="startClock ( )">
<P id="MyTime"> </p>
</body>
</html>
The following example demonstrates the difference between the offsetHeight property and the clientHeight property in measuring the document size.
Note The DIV property's height is set to 150, and this is the value retrieved by the offsetHeight, not the clientHeight.
<div id="theObj" style="background:#066;
color:gold; overflow:scroll; width:300; height:150">
. . . </div>
<button onclick="alert ( theObj.clientHeight )">
client width</button>
<button onclick="alert ( theObj.offsetHeight )">
offset width</button>
This feature requires Microsoft® Internet Explorer® 4.0 or later.
Show me
offsetParent, Measuring Element Dimension and Location