jQuery outerWidth() method

jQuery HTML/CSS Methods

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)

Example

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

Show the difference between width(), height(), innerHeight(), innerWidth(), outerWidth(), and outerHeight():

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

Parameter Value

jQuery HTML/CSS Methods