明示的なCSSの高さが設定されていない場合にDivの高さを取得する方法は?

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

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

jQuery の高さ関数

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

• .height(): パディング、ボーダー、マージンを除外します。
• .innerHeight(): パディングを含みますが、ボーダーとマージンを除きます。
• .outerHeight(): 境界線を含みますが、マージンは除きます。
• .outerHeight(true): マージンを含みます。

使用デモ

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

<code class="js">$(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>')
});</code>

出力:

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

以上が明示的なCSSの高さが設定されていない場合にDivの高さを取得する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。