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

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

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

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

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

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

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

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

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

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

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