Método outerHeight

O método outerHeight permite obter e alterar a altura de um elemento incluindo o preenchimento interno, a borda e seletivamente - as margens externas do elemento. É importante lembrar que obteremos o 'valor calculado' da altura (computed height). Erros de cálculo também podem ocorrer se o usuário alterar o tamanho da página, ou se o elemento ou seu pai estiverem ocultos.

Sintaxe

É assim que podemos obter a altura do elemento. Este método pode aceitar um parâmetro opcional na forma de true ou false (false é o padrão), dependendo se as margens externas serão incluídas ou não. Em alguns casos, os valores obtidos podem ser fracionários:

javascript$(seletor).outerWidth([incluindo_margin]);

Para alterar a largura do elemento - você pode passar apenas um número (por exemplo 400), então as unidades de medida serão pixels, ou uma string, com a especificação das unidades de medida (por exemplo '10em'):

javascript$(seletor).outerHeight(novo valor, [incluindo_margin]);

Também podemos aplicar uma função definida a cada elemento no conjunto. Neste caso, o primeiro parâmetro da função receberá o índice do elemento no conjunto, e o segundo parâmetro - o valor atual da altura definida para o elemento específico. this dentro da função apontará para o elemento atual. O valor da largura do elemento mudará para aquele retornado pela função:

javascript$(seletor).outerHeight(function(índice no conjunto, valor atual da altura));

Exemplo

Vamos, para comparação, exibir informações sobre a altura do parágrafo #test, obtida pelos métodos height, innerHeight e outerHeight:

html<p id="test">texto</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

javascriptlet 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);

Veja também