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:

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

O CSS está assim:

p {
	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):

let 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:

let 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.

Complete a solução das tarefas anteriores - exiba no terceiro parágrafo abaixo da div #wrapper os valores de largura e altura da div #wrapper - incluindo o preenchimento interno e as bordas, mas sem as margens externas. No quarto parágrafo, exiba os valores de largura e altura da div #wrapper incluindo todas as margens e bordas.

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:

$('#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.