明示的な CSS ルールを使用せずに Div の高さを決定する

CSS で高さが明示的に設定されていない場合、div の高さを取得するのは困難になることがあります。通常、これには .height() jQuery メソッドが使用されますが、適切に機能するには既存の CSS ルールが必要です。別のアプローチは次のとおりです:

jQuery の高さ関数

jQuery は、CSS の高さルールがなくても、正確な高さを測定できるさまざまな高さ関数を提供します:

• .height(): パディング、ボーダー、およびmargin.
• .innerHeight(): パディングは含まれますが、境界線とマージンは除外されます。
• .outerHeight(): 境界線は含まれますが、マージンは除外されます。
• .outerHeight(true): 含まれるものmargin.

使用デモ

以下のコード スニペットは、これらの関数の使用方法を示しています。

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : '   $heightTest.height()   ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]</p>')
});

出力:

div の計算された高さが div 自体に表示され、各関数の出力に関する詳細情報が提供されます。