offsetHeight property
Retrieves the height of the object relative to the layout or coordinate parent, as specified by the offsetParent property.
Syntax
| JavaScript | |
|---|
Property values
Type: Integer
the height, in pixels.
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 Dynamic HTML (DHTML) Document Object Model (DOM), see Measuring Element Dimension and Location with CSSOM in Internet Explorer 9.
To comply with the Cascading Style Sheets, Level 1 (CSS1) box model, Microsoft Internet Explorer 6 and later calculate the height of objects differently when you use the !DOCTYPE declaration in your document to switch on standards-compliant mode. This difference may affect the value of the offsetHeight property. When standards-compliant mode is switched on, the height property specifies the distance between the top and bottom edges of the bounding box that surrounds the object's content. When standards-compliant mode is not switched on, and with earlier versions of Windows Internet Explorer, the height property also includes the border and padding belts that surround the object's bounding box.
Examples
This example adjusts the size of a clock's readout to fit the current width and height of the document body.
<!DOCTYPE html>
<html>
<head>
<title>A Simple Clock</title>
<script>
function startClock() {
window.setInterval(Clock_Tick, 1000);
Clock_Tick();
}
var iRatio = 4;
function Clock_Tick() {
var dToday = Date();
var sTime = dToday.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"> </p>
</body>
</html>
This example uses the offsetHeight property and the clientHeight property to show different ways of measuring the object size.
Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/offsetHeight.htm
<!DOCTYPE html> <html> <head> <title>offsetHeight</title> </head> <body style="text-align: center;"> <div id="oID_1" style="overflow: scroll; width: 200px; height: 100px"> This example shows the difference between the dimension retrieved by the <strong>clientHeight</strong> and the dimension retrieved by the <strong>offsetHeight</strong>, the latter including the height of scrollbars. </div> <p> <button onclick="alert(oID_1.clientHeight)">clientHeight</button> <button onclick="alert(oID_1.offsetHeight)">offsetHeight</button> </p> <p>[Right-click anywhere in this window to view the source code.]</p> </body> </html>
See also
- a
- abbr
- acronym
- address
- applet
- area
- article
- aside
- b
- bdo
- big
- blockQuote
- body
- br
- button
- caption
- center
- cite
- code
- col
- colGroup
- custom
- dd
- del
- dfn
- dir
- div
- dl
- dt
- em
- embed
- fieldSet
- figcaption
- figure
- font
- footer
- form
- frame
- frameSet
- head
- header
- hgroup
- hn
- hr
- html
- i
- iframe
- img
- input type=button
- input type=checkbox
- input type=email
- input type=file
- input type=hidden
- input type=image
- input type=number
- input type=password
- input type=radio
- input type=range
- input type=reset
- input type=search
- input type=submit
- input type=tel
- input type=text
- input type=url
- ins
- isIndex
- kbd
- label
- legend
- li
- listing
- map
- mark
- marquee
- menu
- nav
- nextID
- noBR
- object
- ol
- optGroup
- option
- p
- plainText
- pre
- q
- rt
- ruby
- s
- samp
- section
- select
- small
- span
- strike
- strong
- sub
- sup
- table
- tBody
- td
- textArea
- tFoot
- th
- tHead
- tr
- tt
- u
- ul
- var
- xmp