今回は高さ（height）について解説していきたいと思います。
それでは見ていきましょう(^^♪
Menu
heightメソッド
特長
・高さの取得と設定ができます。
・border,padding,marginを含まない高さを取得します。
取得
$(要素).height()
下記の図のような高さが100pxの赤の四角の高さを取得します。
1 2 3 4 5 | $(function() { $('button').click(function() { $('.sample').append($('.sample').height() + 'px'); }); }); |
padding,border,marginは高さに含まないので初期値の100pxになります。
設定
$(要素).height(高さ指定)
下記の赤の四角のように高さを200pxに設定することも可能です。
1 2 3 | $("button").click(function(){ $(".sample").height(200); }) |
【CSS】
heightの引数に高さを指定してあげれば100pxから200pxに変更できます。
innerHeightメソッド
特長
・paddingを含めた高さを取得します。
・値の取得ができます（設定は不可）
取得
$(要素).innerHeight()
1 2 3 4 5 | $(function() { $('button').click(function() { $(".sample").append($('.sample').innerHeight() + 'px'); }); }); |
paddingが上下に1pxずつ加算されるので102pxになります。
outerHeightメソッド
特長
・paddingとborderを含めた高さを取得します。
・値の取得ができます（設定不可）
取得
$(要素).outerHeight()
1 2 3 4 5 | $(function() { $('button').click(function() { $(".sample").append('<p>outerHeight : '+$('.sample').outerHeight()+'</p>'); }); }); |
marginを抜いたpaddingとborderの高さの上下が加算されるので122pxになります。
outerHeight(true)メソッド
特長
・paddingとbordeとmarginの全てを含めた高さを取得します。
・値の取得ができます（設定不可）
取得
$(要素).outerHeight(true)
1 2 3 4 5 | $(function() { $('button').click(function() { $(".sample").append('<p>outerHeight(true) : '+$('.sample').outerHeight(true)+'</p>'); }); }); |
全ての上下が加算されるので126pxになります。
HTMLの高さ
ページ全体（HTML）の高さ（長さ）を取得します。
1 | $(document).height(); |
Windowの高さ
ウィンンドウ（ブラウザ）の高さを取得します。
1 | $(window).height(); |
まとめ
このように高さの指定でも周辺のボーダーなどを含めた値と含めない値では、値が違うのではみ出て収まらない～なんていう際はこの辺を注意して高さを求めるようにしましょう。
以上です。
