Método outerHeight
El método outerHeight permite obtener
y modificar la altura de un elemento teniendo en cuenta el relleno interno,
el borde y selectivamente los márgenes externos del elemento. Es importante
recordar que obtendremos el 'valor calculado' de la altura
(computed height).
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 la altura 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 la altura 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).outerHeight(nuevo valor, [incluyendo_margin]);
También podemos aplicar una función determinada a cada
elemento en el conjunto. En este caso, la función recibirá como primer parámetro
el número del elemento en el conjunto, y como segundo parámetro
- el valor actual de la altura establecida para el elemento
concreto. this dentro de la función
apuntará al elemento actual.
El valor de la altura del elemento cambiará al
que devuelva la función:
$(selector).outerHeight(function(número en el conjunto, valor actual de la altura));
Ejemplo
Para comparar, mostremos información sobre
la altura del párrafo #test, obtenida por los métodos
height,
innerHeight y
outerHeight:
<p id="test">texto</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 h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);
$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);
Véase también
-
método
height,
que permite obtener y modificar la altura del elemento -
método
innerHeight,
que permite obtener y modificar la altura del elemento, teniendo en cuenta su relleno interno
