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:
<p id="test">text</p>
<p id="out"></p>
El CSS se ve así:
p {
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):
let 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:
let 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.
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:
$('#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.