jQuery outerHeight() method

jQuery HTML/Méthodes 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)

Exemple

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

Affichez la différence entre width(), height(), innerHeight(), innerWidth(), outerWidth() et outerHeight() :

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

Valeur du paramètre

jQuery HTML/Méthodes CSS