Click to return to the DHTML, HTML     
height Property     HEIGHT Attribute | height...     DHTML Properties    
Web Workshop  |  DHTML, HTML & CSS

height Attribute | height Property


Sets or retrieves the height of the object.

Syntax

HTML{ height: sHeight }
Scriptingobject.style.height [ = sHeight ]

Possible Values

sHeight String that specifies one of the following values:
autoDefault height.
heightFloating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units.
percentageInteger, followed by a %. The value is a percentage of the height of the parent object.

The property is read/write with a default value of auto; the CSS attribute is not inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see Dynamic Properties.

Remarks

If the height property of an IMG is specified, but width property is not specified, the resulting width of the IMG is sized proportionally according to the specified height property and the actual width (in pixels) of the image in the source file.

Consider the following:

Dimensions of image in source file (pixels):100 X 50 (W X H)
Specified image height:2in
Specified image width:not specified
Resulting image height:2in
Resulting image width:4in ((100 / 50) * 2 inches)

If you specify the height property of an IMG, and both the height and width of the image in the source file are identical, the width of the image will match the height.

If you specify the height property and width property of an IMG, the resulting image dimensions will match those specified.

The height of a block object encompasses border-top, border-bottom, padding-top, padding-bottom, margin-top, margin-bottom, and height. The sum of the values of each of the attributes equals the height of the parent object's content.

Percentage values refer to the parent object's height. Negative values are not allowed.

To perform operations on the numeric value of this property, use pixelHeight or posHeight.

For more information about how to access the dimension and location of objects on the page through the document object model, see Measuring Element Dimension and Location.

Example

The following examples use the height attribute and the height property to change the height of the object.

This example uses an inline style sheet to set the height of an image to 4 centimeters.

Sample Code

<IMG SRC="sphere.jpg" STYLE="height:4cm">

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

This example uses inline scripting to change the height of an image when an onclick event occurs.

<BUTTON onclick="height1.style.height='1cm'">Shrink sphere</BUTTON>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

Applies To

[ Object Name ]
PlatformVersion
Win16:
Win32:
Mac:
Unix:
WinCE:
APPLET, BUTTON, currentStyle, custom, DIV, EMBED, FIELDSET, HR, 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, ISINDEX, MARQUEE, OBJECT, runtimeStyle, SPAN, style, TABLE, TEXTAREA, TR


Back to topBack to top

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

© 1999 Microsoft Corporation. All rights reserved. Terms of use.