Método outerWidth
El método outerWidth permite obtener
y modificar el ancho de un elemento teniendo en cuenta el relleno interno,
el borde y opcionalmente - los márgenes externos del elemento. Es importante
recordar que obtendremos el 'valor calculado' del ancho
(computed width).
Los errores en el cálculo también pueden ocurrir si
el usuario cambia el tamaño de la página, o si
el elemento o su padre están ocultos.
Sintaxis
Así podemos obtener el ancho del elemento. Este método puede
aceptar un parámetro opcional en forma de true
o false (false es el valor por defecto),
dependiendo de si se tendrán en cuenta los márgenes
externos o no. En algunos casos
los valores obtenidos pueden ser fraccionarios:
$(selector).outerWidth([incluyendo_margin]);
Para cambiar el ancho del elemento - se puede pasar simplemente
un número (por ejemplo 400), entonces las unidades
de medida serán píxeles, o una cadena,
con la indicación de las unidades de medida (por ejemplo
'10em'):
$(selector).outerWidth(nuevo valor, [incluyendo_margin]);
También podemos aplicar una función determinada a cada
elemento en el conjunto. Además, el primer parámetro de la función
recibirá el número del elemento en el conjunto, y el segundo parámetro
- el valor actual del ancho establecido para el elemento
específico. this dentro de la función
apuntará al elemento actual.
El valor del ancho del elemento cambiará al
que devuelva la función:
$(selector).outerWidth(function(número en el conjunto, valor actual del ancho));
Ejemplo
Vamos a mostrar para comparar la información sobre
el ancho del párrafo #test, obtenido por los métodos
width,
innerWidth y
outerWidth:
<p id="test">text</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>
p {
margin: 10px;
padding: 5px;
border: 2px solid blue;
}
let w1 = $('#test').width();
let w2 = $('#test').innerWidth();
let w3 = $('#test').outerWidth(false);
let w4 = $('#test').outerWidth(true);
$('#out1').text(w1);
$('#out2').text(w2);
$('#out3').text(w3);
$('#out4').text(w4);
Véase también
-
método
width,
que permite obtener y modificar el ancho del elemento -
método
innerWidth,
que permite obtener y modificar el ancho del elemento, teniendo en cuenta su relleno interno
