offsetHeight Property

MS Office DHTML, HTML & CSS

previous page next page

Click to return to the DHTML, HTML & CSS home page

offscreenBuffering Proper...

offsetLeft Property

DHTML Properties

Web Workshop | DHTML, HTML & CSS

offsetHeight Property

Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property.

Syntax

HTML N/A

Scripting [ iHeight = ] object.offsetHeight

HTML	N/A
Scripting	[ iHeight = ] object.offsetHeight

Possible Values

iHeight Integer that specifies the height, in pixels.

The property is read-only with no default value.

Remarks

You can determine the location, width, and height of an object by using a combination of 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 about how to access the dimension and location of elements on the page through the document object model, see measuring element dimension and location.

Example

This example adjusts the size of a clock's readout to fit the current width and height of the document body.

Sample Code
<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>
</HEAD>
<BODY onload="startClock()">
<P ID="MyTime">&nbsp;</P>
</BODY>
</HTML>
This example uses the offsetHeight property and the clientHeight property to show different ways of measuring the object size.
<DIV ID=oDiv STYLE="overflow:scroll; width:200; height:100"> . . . </DIV>
<BUTTON onclick="alert(oDiv.clientHeight)">client height</BUTTON>
<BUTTON onclick="alert(oDiv.offsetHeight)">offset height</BUTTON>
This feature requires Microsoft® Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Applies To

[ Object Name ]

Platform Version

Win16:

Win32:

Mac:

Unix:

WinCE:

Version data is listed when the mouse hovers over a link, or the link has focus.

A, ACRONYM, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, custom, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, Hn, HR, I, IFRAME, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, NEXTID, NOBR, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP

Did you find this topic useful? Suggestions for other topics? write us!

previous page start next page