CSS の高さを定義せずに div の高さを決定するにはどうすればよいですか?

CSS 高さを定義せずに Div の高さを決定する

高さルールが設定されていない場合、要素の高さを取得するのは困難になることがあります。 CSS。ここで、高さを取得するためのさまざまな jQuery メソッドを理解することが重要になります。

誤解に反して、jQuery の .height() メソッドは、定義された CSS 高さルールに依存しません。これにより、要素のコンテンツ、パディング、境界線を含む計算された高さが決定されます。これにより、CSS で明示的に指定されているかどうかに関係なく、要素の実際の高さを取得するための効果的なツールになります。

高さ測定メソッド

jQuery には、次の 3 つの主なメソッドが用意されています。要素の高さの測定:

• .height(): パディング、ボーダー、マージンを除いた要素の高さを返します。
• .innerHeight(): パディングを含み、ボーダーとマージンを除いた要素の高さを返します。
• .outerHeight(): ボーダーを含み、マージンを除いた要素の高さを返します。より包括的な測定の場合は、.outerHeight(true) を使用してマージンも含めます。

デモ

提供されたコード スニペットでは、これらのメソッドの使用法を示します。

$(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>')
});

これらの jQuery メソッドを理解することで、CSS の高さルールが定義されていない場合でも、要素の高さを効果的に取得できます。

以上がCSS の高さを定義せずに div の高さを決定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。