jQuery outerHeight() method

jQuery HTML/Método CSS

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, 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)

Exemplo

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);
});

Configure 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);
});

Exibir a diferença entre width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

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

Valor do Parâmetro

jQuery HTML/Método CSS