jQuery outerWidth() method

jQuery HTML/Méthodes CSS

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)

Exemple

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

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

Affichez les différences 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