jQueryで要素の高さを取得する - height(), innerHeight(), outerHeight()の違い
2024-04-02
jQueryで要素のレンダリングされた高さを取得する方法
概要
方法
height() メソッド
最も簡単な方法は height() メソッドを使用することです。これは、要素のコンテンツの高さ（パディングやボーダーを含む）を取得します。
// 要素の高さを取得
const height = $(element).height();
// 例
const element = $('.my-element');
const height = element.height();
console.log(height); // 100px
// 要素の内側の高さを取得
const innerHeight = $(element).innerHeight();
// 例
const element = $('.my-element');
const innerHeight = element.innerHeight();
console.log(innerHeight); // 80px
// 要素の外側の高さを取得
const outerHeight = $(element).outerHeight();
// 例
const element = $('.my-element');
const outerHeight = element.outerHeight();
console.log(outerHeight); // 120px
offset().height プロパティは、要素のコンテンツの高さ（パディング、ボーダー、マージンを含む）と、要素のスクロールバーの高さ（存在する場合）を取得します。
// 要素のオフセット高さを取得
const offsetHeight = $(element).offset().height;
// 例
const element = $('.my-element');
const offsetHeight = element.offset().height;
console.log(offsetHeight); // 120px
css() メソッドを使用して height プロパティを取得することもできます。
// 要素のCSS高さを取得
const height = $(element).css('height');
// 例
const element = $('.my-element');
const height = element.css('height');
console.log(height); // 100px
注意点
- 要素がまだレンダリングされていない場合、これらのメソッドは正確な高さを返さない可能性があります。
- 要素に
display: noneスタイルが設定されている場合、これらのメソッドは 0 を返します。 - 要素に
position: absoluteまたはposition: fixedスタイルが設定されている場合、これらのメソッドは要素のオフセット高さを返します。
jQueryで要素のレンダリングされた高さを取得するには、さまざまな方法があります。どの方法を使用するかは、要件によって異なります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQueryで要素のレンダリングされた高さを取得する</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="my-element">
<h1>タイトル</h1>
<p>これはサンプルテキストです。</p>
</div>
<script>
// 1. height() メソッド
const height = $('.my-element').height();
console.log('height:', height); // 100px
// 2. innerHeight() メソッド
const innerHeight = $('.my-element').innerHeight();
console.log('innerHeight:', innerHeight); // 80px
// 3. outerHeight() メソッド
const outerHeight = $('.my-element').outerHeight();
console.log('outerHeight:', outerHeight); // 120px
// 4. offset().height プロパティ
const offsetHeight = $('.my-element').offset().height;
console.log('offsetHeight:', offsetHeight); // 120px
// 5. css() メソッド
const cssHeight = $('.my-element').css('height');
console.log('cssHeight:', cssHeight); // 100px
</script>
</body>
</html>
このコードを実行すると、コンソールに以下の出力が表示されます。
height: 100px
innerHeight: 80px
outerHeight: 120px
offsetHeight: 120px
cssHeight: 100px
各方法の詳細
// 要素の高さを取得
const height = $(element).height();
// 例
const element = $('.my-element');
const height = element.height();
console.log(height); // 100px
// 要素の内側の高さを取得
const innerHeight = $(element).innerHeight();
// 例
const element = $('.my-element');
const innerHeight = element.innerHeight();
console.log(innerHeight); // 80px
// 要素の外側の高さを取得
const outerHeight = $(element).outerHeight();
// 例
const element = $('.my-element');
const outerHeight = element.outerHeight();
console.log(outerHeight); // 120px
// 要素のオフセット高さを取得
const offsetHeight = $(element).offset().height;
// 例
const element = $('.my-element');
const offsetHeight = element.offset().height;
console.log(offsetHeight); // 120px
// 要素のCSS高さを取得
const height = $(element).css('height');
// 例
const element = $('.my-element');
const height = element.css('height');
console.log(height); // 100px
応用例
- 要素の高さをに応じてレイアウトを変更する
- スクロールバーの高さを設定する
- 要素が画面内に収まるかどうかを確認する
jQueryで要素のレンダリングされた高さを取得するその他の方法
getBoundingClientRect() メソッドは、要素の座標とサイズに関する情報を取得します。この情報を使用して、要素のレンダリングされた高さを計算することができます。
// 要素のレンダリングされた高さを取得
function getHeight(element) {
const rect = element.getBoundingClientRect();
return rect.bottom - rect.top;
}
// 例
const element = $('.my-element');
const height = getHeight(element);
console.log(height); // 120px
// 要素の外側の高さを取得 (スクロールバーを含む)
const outerHeight = $(element).outerHeight(true);
// 例
const element = $('.my-element');
const outerHeight = element.outerHeight(true);
console.log(outerHeight); // 120px
position().top と position().bottom プロパティを使用して、要素のオフセットの上下位置を取得することができます。これらの値を使用して、要素のレンダリングされた高さを計算することができます。
// 要素のレンダリングされた高さを取得
function getHeight(element) {
const position = element.position();
return position.bottom - position.top;
}
// 例
const element = $('.my-element');
const height = getHeight(element);
console.log(height); // 120px
.height() メソッドと .css() メソッドを組み合わせて、要素のコンテンツの高さ（パディングやボーダーを含む）と、要素のスクロールバーの高さ（存在する場合）を取得することができます。
// 要素のレンダリングされた高さを取得
function getHeight(element) {
const height = element.height();
const scrollbarHeight = element.css('overflow-y') === 'scroll' ? element.prop('scrollHeight') - height : 0;
return height + scrollbarHeight;
}
// 例
const element = $('.my-element');
const height = getHeight(element);
console.log(height); // 120px
javascript jquery css
