jQuery outerHeight() method

jQuery HTML/Métodos CSS

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

outsideHeight(truemethod 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)

Ejemplo

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

Mostrar la diferencia entre width(), height(), innerHeight(), innerWidth(), outerWidth() y outerHeight():

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

Valor del parámetro

jQuery HTML/Métodos CSS