In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > offsetHeight

offsetHeight property

Browser support:

Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.

The clientHeight property is similar to the offsetHeight property, but it returns the height including only the padding.

If you need the total height of an element's contents, use the scrollHeight property. It returns the height of the contents with the padding, but without the scrollBar, border and the margin. In Opera, the scrollbar is also included.
Another way to get the height of an object is to use the getBoundingClientRect method. It returns the bounding rectangle of the object without the margin.

You can set the height of an element with the height, pixelHeight and posHeight style properties. In that case, the value of the height contains the height of the visible contents with the horizontal scrollbar, but without the padding, border and the margin. You can get the value of the height style property in different units with these properties, not the rendered height of the element.

Note that the offsetHeight property is special for the html element.

It returns the height of the browser's client area without the horizontal scrollbar in Internet Explorer like the clientHeight property of the html element.
In Firefox, Opera, Google Chrome and Safari, it returns the total height of the document.

If you need a cross-browser solution to get the total size of the document, use the scrollWidth and scrollHeight properties of the html element.
If you need the size of the browser's client area, use the clientWidth and clientHeight properties of the html element.

Note that the offsetHeight property of the html element retrieves the height in physical pixel size in Internet Explorer earlier than version 8, while from version 8, it returns the height in logical pixel size.
For further details, please see the page for the clientHeight property.

To get the width of the document or an element in the document, use the clientWidth, offsetWidth or the scrollWidth property.
Or, if you need the position of an element, you can use the offsetLeft, offsetTop properties and the getBoundingClientRect method.

Syntax:

object.offsetHeight;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that returns the height, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the offsetHeight property:

<head>
    <style>
        #container {
            width: 350px;
            height: 150px;
            margin: 10px;
            border: 2px solid red;
            padding: 15px;
        }
    </style>
    <script type="text/javascript">
        function GetContainerSize () {
            var container = document.getElementById ("container");

            var message = "The height with padding: " + container.clientHeight + "px.\n";
            message += "The height with padding and border: " + container.offsetHeight + "px.\n";

            message += "The width width padding: " + container.clientWidth + "px.\n";
            message += "The width with padding and border: " + container.offsetWidth + "px.\n";

            alert (message);
        }
    </script>
</head>
<body>
    <div id="container">
        The width of this element is 350px<br />
        The height of this element is 150px<br />
        Furthermore, the element has the following style definitions:<br />
        margin: 10px; border: 2px solid red; padding: 15px;
    </div>
    <button onclick="GetContainerSize ();">Get the size of the container!</button>
</body>