jQuery outerWidth() method

jQuery HTML/Métodos CSS

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

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

Exemplo

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

Exibir a diferença entre width(), height(), innerHeight(), innerWidth(), outerWidth() e outerHeight():

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

Valor do Parâmetro

jQuery HTML/Métodos CSS