jQueryにおけるinnerWidthメソッドとinnerHeightメソッド

innerWidthメソッドと innerHeightメソッドを使用すると、要素の幅と高さを取得できますが、今回はコンテンツだけでなく、内部パディングpaddingも含まれます。

段落#testの幅と高さの値を、innerWidthと innerHeightを使って取得し、別の段落に出力してみましょう。2つの段落があるとします：

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

CSSは以下のようになります：

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

Javascriptでは以下のコードを記述します：

let w = $('#test').innerWidth();
let h = $('#test').innerHeight();
$('#out').text('Width: ' + w + ' Height: ' + h);

ご覧の通り、値はすでに10px異なっています。これは内部パディングが考慮されているためで、今回のケースではすべての辺で5pxずつになっています。

また、innerWidthメソッドと innerHeightメソッドを使って、要素の幅と高さの値を変更することも簡単にできます。例えば、div#test1の幅を250pxに、div#test2の高さを200pxに設定してみましょう：

$('#test1').innerWidth(250);
$('#test2').innerHeight(200);

最初のタスクの解答を補足してください - div#wrapperの下の2番目の段落に、div#wrapperの幅と高さの値を、今回は内部パディングを考慮したが、境界線や外部マージンを考慮しない形で出力してください。