jQuery height() example

jQuery height() function is used to get the current computed height for the first element in the set of matched elements or sets the height of every matched element
We will see below two variations of this method:
  • height() - get the current computed height for the first element in the set of matched elements
  • height( value ) - sets the height of every matched element

jQuery height() function

This jQuery height() function is used to get the current computed height for the first element in the set of matched elements.

Syntax

height()
This method does not accept any arguments. Example: This method is also able to find the height of the window and document.
// Returns height of browser viewport
$( window ).height();
 
// Returns height of HTML document
$( document ).height();

Example

Show various heights. Note the values are from the iframe so it might be smaller than you expected. The yellow highlight shows the iframe body.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>height demo</title>
    <style>
        body {
            background: yellow;
        }

        button {
            font-size: 12px;
            margin: 2px;
        }

        p {
            width: 150px;
            border: 1px red solid;
        }

        div {
            color: red;
            font-weight: bold;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <button id="getp">Get Paragraph Height</button>
    <button id="getd">Get Document Height</button>
    <button id="getw">Get Window Height</button>

    <div>&nbsp;</div>
    <p>
        Sample paragraph to test height
    </p>

    <script>
        function showHeight(element, height) {
            $("div").text("The height for the " + element + " is " + height + "px.");
        }
        $("#getp").click(function() {
            showHeight("paragraph", $("p").height());
        });
        $("#getd").click(function() {
            showHeight("document", $(document).height());
        });
        $("#getw").click(function() {
            showHeight("window", $(window).height());
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

jQuery height( value ) function

This function is used to set the CSS height of every matched element.

Syntax

height( value )
value - An integer representing the number of pixels, or an integer with an optional unit of measure appended (as a string).

Example

To set the height of each div on click to 50px plus a color change.
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>height demo</title>
    <style>
        div {
            width: 50px;
            height: 70px;
            float: left;
            margin: 5px;
            background: rgb(255, 140, 0);
            cursor: pointer;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>

<body>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>

    <script>
        $("div").one("click", function() {
            $(this).height(50).css({
                cursor: "auto",
                backgroundColor: "red"
            });
        });
    </script>

</body>

</html>
Try it Yourself - Copy paste code in Online HTML Editor to see the result

Comments