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:

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

O estilo CSS do parágrafo é assim:

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

Agora, escrevemos o código Javascript:

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

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

html<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>

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