innerHeightメソッド

メソッドinnerHeightは、要素の内部パディングを含む高さの取得と変更を可能にします。 '計算された高さ'(computed height)を取得することに注意してください。ユーザーがページサイズを変更した場合や、要素またはその親が非表示になっている場合にも計算エラーが発生する可能性があります。高さの値は、要素のボーダーの厚さを考慮しません。

構文

要素の高さを取得します。場合によっては、取得される値が小数になることがあります:

$(セレクタ).innerHeight();

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

$(セレクタ).innerHeight(新しい値);

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

$(セレクタ).innerHeight(function(セット内の番号, 現在の高さ値));

例

比較のために、段落#testの高さ情報を、height メソッドとinnerHeightメソッドで取得して表示してみましょう:

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

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

let h1 = $('#test').height();
let h2 = $('#test').innerHeight();

$('#out1').text(h1);
$('#out2').text(h2);

10pxの差が確認できるはずです。これは、上下の内部パディングの合計値です。

innerHeightメソッド

構文

例

関連項目