jQuery outerHeight() method

jQuery HTML/CSS Methods

The outsideHeight() method gets or sets the external height of the selected element (including padding, border).

outsideHeight(true) method to get or set the external height of the selected element (including padding, border, and margin).

When using the externalHeight() methodGetwhen setting the height, it will returnthe first selected elementheight.

When using the externalHeight() methodSetwhen setting the height, it will setAll selected elementsheight.

As shown in the figure below, the externalHeight() method includes padding and border:

To include margin, please use outerHeight(true).

Syntax:

Get the external height:

$(selector).outerHeight()

Get the external height including margins:

$(selector).outerHeight(true)

Set the external height:

$(selector).outerHeight(value)

Example

Get the external height of the DIV element:

$("div").click(function(){
　　$(this).outerHeight();
});

Get the external height of the DIV element (including margins):

$("div").click(function(){
　　$(this).outerHeight(true);
});

Set the external height of all paragraphs:

$("button").click(function(){
　　$("p").outerHeight("100);
});

Set the external height of all paragraphs using different unit settings:

$("#btn1").click(function(){
　　$("p").outerHeight("100);
});
$("#btn2").click(function(){
　　$("p").outerHeight("7em);
});
$("#btn3").click(function(){
　　$("p").outerHeight("100vh);
});

Show the difference between width(), height(), innerHeight(), innerWidth(), outerWidth(), and outerHeight():

$("button").click(function(){
　　$("div").width();
　　$("div").innerWidth();
　　$("div").outerWidth();
　　$("div").height();
　　$("div").innerHeight();
　　$("div").outerHeight();
});

Parameter Value

jQuery HTML/CSS Methods