その他の判定方法：height() / width() / offset()
2024-04-02
jQueryには、要素が表示されているかどうかを検出する便利なセレクターとメソッドが用意されています。これらの機能を使いこなすことで、スクロール時の要素の表示・非表示切り替えや、レスポンシブデザインにおけるレイアウト調整など、さまざまな場面で役立ちます。
表示判定の仕組み
jQueryでは、要素の表示状態を以下の2種類に分類します。
- 表示されている（visible）：要素の幅と高さが0より大きく、かつ
displayプロパティがnoneではない状態 - 非表示（hidden）：要素の幅と高さのいずれかが0、または
displayプロパティがnoneの状態
方法
要素が表示されているかどうかを検出するには、以下の2つの方法があります。
:visible セレクター
:visibleセレクターは、表示されている要素のみを選択するセレクターです。このセレクターを使用する方法は以下の2通りです。
- jQueryオブジェクトに直接適用する
// すべての表示されている要素を取得
const visibleElements = $(`:visible`);
// 特定の要素の子要素のうち、表示されている要素のみを取得
const visibleChildren = $(`.parent-element`).children(`:visible`);
- is()メソッドと組み合わせて使用する
// 要素が現在表示されているかどうかを判定
const isVisible = $(element).is(`:visible`);
css()メソッドを使用して、要素のdisplayプロパティを取得することで、表示状態を判定することができます。
// 要素の表示状態を取得
const displayValue = $(element).css('display');
// 表示状態を判定
const isVisible = displayValue !== 'none';
その他の判定方法
上記以外にも、以下の方法で要素の表示状態を判定することができます。
- offset()メソッド
offset()メソッドを使用して、要素のオフセットを取得し、その値が0かどうかを判定します。
- height() / width()メソッド
注意点
- 要素が
visibility: hiddenプロパティによって非表示になっている場合、is(:visible)セレクターでは非表示と判定されますが、css('display')メソッドでは表示と判定されます。 - 要素が
position: absoluteプロパティによって配置されている場合、offset()メソッドによる判定は正しく行われない可能性があります。
例
以下のコードは、スクロール時に画面上部に表示された要素を固定する例です。
<div id="header">
<h1>タイトル</h1>
</div>
<div id="content">
<p>長い文章</p>
<p>長い文章</p>
<p>長い文章</p>
</div>
$(window).scroll(function() {
const headerHeight = $('#header').height();
const scrollTop = $(window).scrollTop();
if (scrollTop >= headerHeight) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});
jQueryには、要素の表示状態を検出する便利な機能が用意されています。これらの機能を使いこなすことで、さまざまな場面で役
<div id="parent">
<div class="child visible">表示されている要素</div>
<div class="child hidden">非表示の要素</div>
</div>
// すべての表示されている要素を取得
const visibleElements = $(`:visible`);
// 特定の要素の子要素のうち、表示されている要素のみを取得
const visibleChildren = $(`.parent`).children(`:visible`);
// 要素が現在表示されているかどうかを判定
const isVisible = $(`.child.visible`).is(`:visible`);
console.log(visibleElements.length); // 1
console.log(visibleChildren.length); // 1
console.log(isVisible); // true
css()メソッド
<div id="element">
要素
</div>
// 要素の表示状態を取得
const displayValue = $(`#element`).css('display');
// 表示状態を判定
const isVisible = displayValue !== 'none';
console.log(isVisible); // true
<div id="element">
要素
</div>
// offset()メソッドによる判定
const offset = $(`#element`).offset();
const isVisible = offset.top !== 0 && offset.left !== 0;
// height() / width()メソッドによる判定
const height = $(`#element`).height();
const width = $(`#element`).width();
const isVisible = height > 0 && width > 0;
console.log(isVisible); // true
<div id="header">
<h1>タイトル</h1>
</div>
<div id="content">
<p>長い文章</p>
<p>長い文章</p>
<p>長い文章</p>
</div>
$(window).scroll(function() {
const headerHeight = $('#header').height();
const scrollTop = $(window).scrollTop();
if (scrollTop >= headerHeight) {
$('#header').addClass('fixed');
} else {
$('#header').removeClass('fixed');
}
});
上記は、jQueryで要素が表示されているかどうかを検出するサンプルコードです。これらのコードを参考に、さまざまな場面で表示判定機能を活用してみてください。
要素の表示判定：その他の方法
is(':hidden') セレクター
概要
is(':hidden')セレクターは、非表示の要素のみを選択するセレクターです。is(':visible')セレクターの逆バージョンとして使用できます。
<div id="parent">
<div class="child visible">表示されている要素</div>
<div class="child hidden">非表示の要素</div>
</div>
// 非表示の要素のみを取得
const hiddenElements = $(`:hidden`);
// 特定の要素の子要素のうち、非表示の要素のみを取得
const hiddenChildren = $(`.parent`).children(`:hidden`);
// 要素が現在非表示かどうかを判定
const isHidden = $(`.child.hidden`).is(`:hidden`);
console.log(hiddenElements.length); // 1
console.log(hiddenChildren.length); // 1
console.log(isHidden); // true
is(':hidden')セレクターは、displayプロパティがnoneである要素のみを非表示と判定します。visibility: hiddenプロパティによって非表示になっている要素は、このセレクターでは非表示と判定されません。
:not(:visible) セレクター
:not(:visible)セレクターは、表示されていない要素を選択するセレクターです。is(':hidden')セレクターと同様の機能を持ちますが、より簡潔な記述が可能です。
<div id="parent">
<div class="child visible">表示されている要素</div>
<div class="child hidden">非表示の要素</div>
</div>
// 非表示の要素のみを取得
const hiddenElements = $(`:not(:visible)`);
// 特定の要素の子要素のうち、非表示の要素のみを取得
const hiddenChildren = $(`.parent`).children(`:not(:visible)`);
// 要素が現在非表示かどうかを判定
const isHidden = $(`.child.hidden`).is(`:not(:visible)`);
console.log(hiddenElements.length); // 1
console.log(hiddenChildren.length); // 1
console.log(isHidden); // true
:not(:visible)セレクターは、is(':hidden')セレクターと同様に、visibility: hiddenプロパティによって非表示になっている要素は非表示と判定しません。
height() / width() メソッド
<div id="element">
要素
</div>
// 要素の高さ・幅を取得
const height = $(`#element`).height();
const width = $(`#element`).width();
// 表示状態を判定
const isVisible = height > 0 && width > 0;
console.log(isVisible); // true
- この方法は、要素が完全に非表示になっている場合のみ有効です。要素が部分的に表示されている場合や、
visibility: hiddenプロパティによって非表示になっている場合は、正しく判定されない可能性があります。
offset() メソッド
<div id="element">
要素
</div>
// 要素のオフセットを取得
const offset = $(`#element`).offset();
// 表示状態を判定
const isVisible = offset.top !== 0 && offset.left !== 0;
console.log(isVisible); // true
- この方法は、要素が完全に画面外に
javascript jquery
