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

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

jQuery .height()

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

DEMO

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

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

.outerHeight(): 境界線を含み、マージンを除いた要素の高さを取得します。

.outerHeight(true): 境界線とマージンの両方を含む要素の高さを取得します。

ライブ デモのコード スニペット

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