Métodos outerWidth y outerHeight en jQuery

El último par de métodos - outerWidth y outerHeight, con los cuales es posible obtener el ancho y alto de un elemento teniendo en cuenta todos los márgenes y bordes, o se pueden excluir los márgenes externos margin.

Consideremos un ejemplo. Supongamos que tenemos un párrafo:

html<p id="test">text</p>
<p id="out"></p>

El CSS se ve así:

cssp {
  margin: 10px;
  padding: 5px;
  border: 2px solid blue;
}

Obtengamos los valores de ancho y alto del párrafo #test, teniendo en cuenta los rellenos internos y bordes, para esto es necesario pasar false a estos métodos o dejar los paréntesis vacíos (ya que está establecido por defecto en el método):

javascriptlet w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

Ahora nuestros valores diferirán en 4px más, ya que el grosor del borde es de 2px en cada lado.

Y ahora obtengamos los valores de ancho y alto del párrafo #test, teniendo en cuenta todos los márgenes y bordes, para esto es necesario pasar true a los métodos outerWidth y outerHeight:

javascriptlet w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('Width: ' + w + ' Height: ' + h);

Ahora nuestros valores diferirán de los anteriores en 20px más, ya que los márgenes externos son de 10px en cada lado.

Задание 1

Complemente la solución de las tareas anteriores - muestre en el tercer párrafo bajo el div #wrapper los valores de ancho y alto del div #wrapper - con rellenos internos y bordes incluidos, pero sin márgenes externos. En el cuarto párrafo muestre los valores de ancho y alto del div #wrapper con todos los márgenes y bordes incluidos.

También con los métodos outerWidth y outerHeight podemos cambiar los valores de ancho y alto de los elementos. Por ejemplo, establezcamos el ancho del div #test1 en 250px, y la altura de #test2 - en 200px:

javascript$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

Todos los métodos mencionados para trabajar con dimensiones de elementos también permiten la aplicación de una función a cada elemento en el conjunto.