HTML DOM offsetHeight Property

Last Updated : 13 Jun, 2023

The DOM offsetHeight property is used to return the layout height of an element as an integer. It is measured in pixels. It includes height, border, padding, and horizontal scrollbars but not margin. If the element is hidden then it returns 0.

Syntax:

element.offsetHeight

Return Value: It returns the layout height of an element as an integer.

Example 1: In this example, we will use DOM offsetHeight Property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style offsetHeight Property
    </title>
    <style>
        #GFG {
            height: 150px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h2>DOM offsetHeight Property</h2>
    <div id="GFG">
        <b>Information about this div:</b>
        <p id="sudo"></p>
    </div>
    <button type="button" onclick="Geeks()">
        Submit
    </button>
    <script>
        function Geeks() {
            let element = document.getElementById("GFG");
            let txt = "Height including padding and border: "
                + element.offsetHeight + "px";
            document.getElementById("sudo").innerHTML = txt;
        }
    </script>
</body>
</html>

Output:

Example 2: In this example, we will use DOM offsetHeight Property

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style offsetHeight Property
    </title>
    <style>
        #GFG {
            height: 150px;
            width: 300px;
            padding: 10px;
            margin: 15px;
            background-color: green;
        }
    </style>
</head>
<body>
    <h2>DOM offsetHeight Property</h2>
    <div id="GFG">
        <b>Information about this div:</b>
        <br>
        <p id="sudo"></p>
    </div>
    <button type="button" onclick="Geeks()">
        Submit
    </button>
    <script>
        function Geeks() {
            let element = document.getElementById("GFG");
            let txt = "";
            txt += "Height with padding: "
                + element.clientHeight + "px<br>";
            txt += "Height with padding and border: "
                + element.offsetHeight + "px";
            document.getElementById("sudo").innerHTML = txt;
        }
    </script>
</body>
</html>