jQuery で高さを取得する

この投稿では、指定された要素の高さを取得する jQuery メソッドについて説明します。

jQuery で高さを取得する

jQuery は、jQuery 要素の高さを取得するために、.height()、.innerHeight()、または .outerHeight() の 3つの異なるメソッドを提供します。 要件に応じて、これらのメソッドのいずれかを選択して、jQuery 要素の高さを取得できます。

jQuery は、これらのメソッドを使用して、一致するアイテムのグループ内の最初のアイテムの現在の計算された高さを取得するのに役立ちます。 まず、これらの方法の違いを理解しましょう。

1. .height() - ボーダー、パディング、マージンを除いた要素の高さを返す組み込みの jQuery メソッド。 このメソッドは入力引数を受け入れません。
2. .innerHeight() - 要素の高さを返す組み込みの jQuery メソッド。パディングを含み、マージンとボーダーは除外されます。 このメソッドは入力引数を受け入れません。
3. .outerHeight() - div 要素の境界線を含み余白を除く高さを返す組み込みの jQuery メソッド。 このメソッドは、マージンを含めるかどうかを示すブール値を入力引数として受け入れます。
4. .outerHeight(true) - マージンを含む div の高さを返す組み込みの jQuery メソッド。

構文：

.height().innerHeight().outerHeight(val boolean)

.height() と .css("height") の唯一の違いは、前者は単位なしのピクセル値 (例: 250) を返し、後者は単位をそのままの値 (例: 250px) を返すことです。 )。 数学的な計算で要素の高さを使用する場合は、.height() メソッドをお勧めします。

.height() は、CSS ボックス サイズ プロパティの値に関係なく、常にコンテンツの高さを返します。 これには、要素が box-sizing: border-box の場合、CSS プロパティの height と box-sizing を取得し、各要素のすべての潜在的な境界線とパディングを差し引く必要がある場合があります。

これを避けるには、.height() の代わりに .css( "height") を使用してください。

以下の簡単な例でそれを理解しましょう。

<button id="para">Get Height</button>
<p>
  Hello Users
</p>

p {
  border: 1px black solid;
  margin: 3px;
  padding: 5px;
}

$('#para').on('click', () => {
  console.log('height', $('p').height());
  console.log('Inner height', $('p').innerHeight());
  console.log('Outer height', $('p').outerHeight());
});

上記の例では、1px ボーダー、3px マージン、5px パディングで段落タグを定義しています。 ユーザーがボタンをクリックして段落タグの高さを取得すると、ボーダー、パディング、マージンを除く、p タグの .height() が取得されます。

.innerHeight() メソッドはパディングを含む段落タグの高さを取得し、.outerHeight() メソッドはボーダーとマージンを含む段落タグの高さを取得します。

jQuery をサポートする任意のブラウザーで上記のコード スニペットを試して実行すると、以下の結果が表示されます。

"height", 18.4
"Inner height", 28.4
"Outer height", 30.4

デモ