Métodos outerWidth e outerHeight no jQuery

O último par de métodos - outerWidth e outerHeight, com os quais é possível obter a largura e a altura de um elemento incluindo todos os preenchimentos e bordas, e você pode optar por não incluir as margens externas margin.

Vamos considerar um exemplo. Suponha que temos um parágrafo:

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

O CSS está assim:

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

Vamos obter os valores de largura e altura do parágrafo #test, incluindo o preenchimento interno e as bordas. Para isso, precisamos passar false para esses métodos ou deixar os parênteses vazios (pois esse é o valor padrão do método):

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

Agora, nossos valores diferirão em mais 4px, pois a espessura da borda é de 2px em cada lado.

E agora vamos obter os valores de largura e altura do parágrafo #test, incluindo todas as margens e bordas. Para isso, precisamos passar true para os métodos outerWidth e outerHeight:

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

Agora, nossos valores diferirão dos anteriores em mais 20px, pois nossas margens externas são de 10px em cada lado.

Além disso, com os métodos outerWidth e outerHeight podemos alterar os valores de largura e altura dos elementos. Por exemplo, vamos definir a largura da div #test1 como 250px e a altura de #test2 como 200px:

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

Todos os métodos mencionados para trabalhar com dimensões de elementos também permitem a aplicação de uma função a cada elemento no conjunto.