Métodos width e height no jQuery

Os métodos width e height obtêm, respectivamente, a largura e a altura do conteúdo de um elemento sem considerar o padding, border e margin.

Vamos obter os valores de largura e altura do parágrafo #test e exibi-los em outro parágrafo. Vamos pegar, por exemplo, o seguinte código HTML:

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

O estilo CSS do parágrafo é assim:

p {
	margin: 10px;
	padding: 5px;
}

Agora, escrevemos o código Javascript:

let w = $('#test').width();
let h = $('#test').height();
$('#out').text('Largura: ' + w + ' Altura: ' + h);

Também podemos facilmente alterar os valores de largura e altura dos elementos usando esses métodos. Por exemplo, vamos definir a largura da div #test1 como 250px e a altura da #test2 como 200px:

$('#test1').width(250);
$('#test2').height(200);

Temos esta marcação:

<div id="wrapper">
<div id="test">texto</div>
</div>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
<p id="four"></p>

Os seguintes estilos CSS:

div {
margin: 10px;
padding: 5px;
border: 2px solid green;
}
#wrapper {
border-color: blueviolet;
}

Obtenha e exiba os valores de largura e altura da div #wrapper sem considerar margens e bordas. Exiba os valores no primeiro parágrafo abaixo dessa div.