jQueryのouterWidthメソッドとouterHeightメソッド

最後のペアのメソッドはouterWidthと outerHeightです。これらを用いると、要素の幅と高さを、パディングとボーダーを含めて、あるいは外部マージンmarginを含めずに取得することが可能です。

例を見てみましょう。次のような段落があるとします:

<p id="test">テキスト</p>
<p id="out"></p>

CSSは次のようになっています:

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

段落#testの幅と高さを、パディングとボーダーを含めて取得してみましょう。そのためには、これらのメソッドにfalseを渡すか、括弧を空のままにします（これがデフォルトの動作です）:

let w = $('#test').outerWidth(false);
let h = $('#test').outerHeight();
$('#out').text('幅: ' + w + ' 高さ: ' + h);

今回は値がさらに4px異なります。なぜなら、各辺のボーダーの太さが2pxずつだからです。

次に、段落#testの幅と高さを、すべてのマージンとボーダーを含めて取得してみましょう。そのためには、outerWidthメソッドとouterHeightメソッドに trueを渡す必要があります:

let w = $('#test').outerWidth(true);
let h = $('#test').outerHeight(true);
$('#out').text('幅: ' + w + ' 高さ: ' + h);

今度は値が前回からさらに20px異なります。なぜなら、外部マージンが各辺で10pxずつだからです。

前のタスクの解答を補足してください - #wrapperの下の3番目の段落に、パディングとボーダーは含むが、外部マージンは含まない、 #wrapperの幅と高さの値を出力してください。 4番目の段落には、すべてのマージンとボーダーを含めた、 #wrapperの幅と高さの値を出力してください。

outerWidthメソッドとouterHeightメソッドは、要素の幅と高さを変更するためにも使用できます。例えば、#test1の幅を250pxに、 #test2の高さを200pxに設定してみましょう:

$('#test1').outerWidth(250, true);
$('#test2').outerHeight(200);

要素のサイズを扱うこれらすべてのメソッドは、セット内の各要素に関数を適用する機能も提供しています。