Using jQuery .height() to Set or Get Element Height

jQuery height: Main Tips

• The jQuery .height() method returns the height of the first selected element.
• It can also be used to set the height for all selected elements.
• To make jQuery set height, you can define the new value in either string (with valid measurement units) or number (pixels by default).
• You can read more about jQuery methods used for height and width in this tutorial.

Modifying Height

jQuery .height() is used to set or return the height of selected elements.

In the example below, a click event will trigger an alert displaying the height of the <p> element. The element will also change height:

$("button").click(() => {
    alert($("p").height());
});

$("button").click(() => {
    $("p").height(40);
});

To make jQuery get height of an element, you will need to use this syntax (with no parameters):

$(selector).height();

Use this method to get jQuery window height or document height. Add document or window in the place of the selector.

Note: CSS height property does not include padding, margin, and border.

To make jQuery set height of an element, you need to define a new height value:

$(selector).height(newHeight);

Note: you can also use a function returning a height to set instead of a value.