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

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

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

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

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

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

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

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

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

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

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

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