jQuery outerWidth() method

jQuery HTML/CSS Methoden

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

outerWidth(trueThe method to get or set the external width of the selected element (including padding, border and margin).

When using the externalWidth() methodGetWhen setting the width, it will returnThe first selected elementWidth.

When using the externalWidth() methodSetWhen setting the width, it will setAll selected elementsWidth.

As shown in the figure below, the externalWidth() method includes padding and borders:

To include margins, use outerWidth(true).

Syntax:

Get the external width:

$(selector).outerWidth()

Get the external width including margins:

$(selector).outerWidth(true)

Set the external width:

$(selector).outerWidth(value)

Beispiel

Get the external width of the DIV element:

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

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

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

Set the external width of all paragraphs:

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

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

$("#btn1").click(function(){
　　$("p").outerWidth("100);
});
$("#btn2").click(function(){
　　$("p").outerWidth("10em");
});
$("#btn3").click(function(){
　　$("p").outerWidth("100vw");
});

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