jQuery outerHeight() method

jQuery HTML/CSS Methoden

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 height, it will returnthe first selected elementheight.

When using the externalHeight() methodSetwhen setting 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)

Beispiel

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

Zeige die Unterschiede zwischen width(), height(), innerHeight(), innerWidth(), outerWidth() und outerHeight():

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

Parameterwert

jQuery HTML/CSS Methoden