outerHeightメソッド

outerHeightメソッドは、内部パディング、ボーダー、およびオプションで外部マージンを考慮した要素の高さの取得および変更を可能にします。重要なのは、 '計算された高さ'（computed height）を取得するということです。計算エラーは、ユーザーがページのサイズを変更した場合や、要素またはその親が非表示の場合にも発生する可能性があります。

構文

このようにして要素の高さを取得できます。このメソッドは、 trueまたはfalse（デフォルトはfalse）のオプションパラメータを受け取ることができ、外部マージンを考慮するかどうかによって異なります。場合によっては、取得される値が小数になることがあります：

$(selector).outerWidth([include_margin]);

要素の高さを変更するには、単に数値（例：400）を渡すことができます。その場合、単位はピクセルになります。または、単位を指定した文字列（例：'10em'）を渡すこともできます：

$(selector).outerHeight(new_value, [include_margin]);

また、セット内の各要素に指定された関数を適用することができます。この場合、関数の最初のパラメータはセット内の要素のインデックスを受け取り、 2番目のパラメータは特定の要素の現在の高さの値を受け取ります。関数内のthisは現在の要素を指します。要素の高さは、関数が返す値に変更されます：

$(selector).outerHeight(function(index, current_value));

例

比較のために、段落#testの高さに関する情報を、 heightメソッド、 innerHeightメソッド、およびouterHeightメソッドで取得して表示してみましょう：

<p id="test">テキスト</p>
<p id="out1"></p>
<p id="out2"></p>
<p id="out3"></p>
<p id="out4"></p>

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();
let h3 = $('#test').outerHeight();
let h4 = $('#test').outerHeight(true);

$('#out1').text(h1);
$('#out2').text(h2);
$('#out3').text(h3);
$('#out4').text(h4);

outerHeightメソッド

構文

例

関連項目