jQueryのwidthメソッドとheightメソッド

メソッド width と height は、それぞれ要素のコンテンツの幅と高さを、 padding、 border、 margin を含めずに取得します。

段落 #test の幅と高さの値を取得し、別の段落に表示してみましょう。例として、以下のHTMLコードを使用します：

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

段落のCSSスタイルは次のようになります：

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

次に、Javascriptコードを記述します：

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

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

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

以下のようなマークアップがあります：

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

次のCSSスタイル：

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

マージンとボーダーを除いた div #wrapper の幅と高さの値を取得し、そのdivの下の最初の段落に表示してください。