明示的な CSS 高さルールを使用せずに jQuery で要素の高さを決定する方法は?

CSS 高さルールを使用しない要素の高さの決定

要素の CSS 高さルールがない場合、要素の高さを取得するのは困難になる可能性がありますその高さ。 jQuery .height() メソッドは、事前定義された CSS 高さの値を必要とするため、このシナリオでは不適切であると思われます。ただし、要素の高さを決定する別の方法もあります。

jQuery .height()

一般的な考えに反して、jQuery .height() は依存しません。 CSS の高さの定義について。要素の計算された高さを計算し、明示的な CSS 高さが指定されていないシナリオに適しています。

DEMO

.height(): 要素の高さを取得します。パディング、ボーダー、またはマージンなし。

.innerHeight(): パディングを含み、ボーダーとマージンを除いた要素の高さを取得します。

.outerHeight(): ボーダーを含み、除外された要素の高さを取得します。 margin.

.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>

以上が明示的な CSS 高さルールを使用せずに jQuery で要素の高さを決定する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。