CSS の高さルールが定義されていない場合でも、jQuery で div 要素の高さを取得するにはどうすればよいですか?

CSS の高さルールを使用せずに Div の高さを取得する方法

要素の高さを決定する必要がある場合はイライラするかもしれませんが、 CSS の高さのルールは定義されていません。ただし、心配しないでください。 jQuery は解決策を提供します。

jQuery の Height() メソッドの利用

皆さんの予想に反して、jQuery の .height() メソッドは事前定義された CSS 高さを必要としません。ルール。計算されたスタイルを考慮して、要素のレンダリングされた高さを計算します。これにより、高さが明示的に設定されていないシナリオでも効果的な方法になります。

高さ計算オプションについて

jQuery では、特定のニーズを満たすためにいくつかの高さ計算方法が提供されています。

• .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>')
});

このコードは、高さ 180 ピクセル、パディング 10 ピクセルの div を作成します。 、10pxの余白、青い境界線。次に、それぞれの方法で計算された高さを表示します。ブラウザのコンソールでレンダリング結果を検査できます。

以上がCSS の高さルールが定義されていない場合でも、jQuery で div 要素の高さを取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。