Método outerWidth() de jQuery

jQuery HTML/Métodos CSS

El método outerWidth() obtiene o establece el ancho externo del elemento seleccionado (incluso padding, borde).

outerWidth(true)método para obtener o establecer el ancho externo del elemento seleccionado (incluso padding, borde y margen).

Al utilizar el método externalWidth()Obteneral establecer el ancho, devolveráel primer elemento seleccionadoancho.

Al utilizar el método externalWidth()Estableceral establecer el ancho, estableceráTodos los elementos seleccionadosancho.

Como se muestra en la imagen siguiente, el método externalWidth() incluye relleno y borde:

Para incluir el margen, utilice outerWidth(true).

Sintaxis:

Obtener el ancho externo:

$(selector).outerWidth()

Obtener el ancho externo incluyendo el margen:

$(selector).outerWidth(true)

Establecer el ancho externo:

$(selector).outerWidth(value)

Ejemplo

Obtener el ancho externo del elemento DIV:

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

Obtener el ancho externo del elemento DIV (incluso el margen):

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

Establecer el ancho externo de todos los párrafos:

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

Establecer el ancho externo de todos los párrafos utilizando diferentes configuraciones de unidades:

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

Mostrar la diferencia entre width(), height(), innerHeight(), innerWidth(), outerWidth() y outerHeight():

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

Valor del parámetro

jQuery HTML/Métodos CSS