jQueryで要素の表示と非表示(display:none)を判定する方法

まず display: none を判定するには css('display') で判定します。

if ($('#obj').css('display') == 'none') {
  // 非表示の場合
  console.debug('非表示');
} else {
  // 表示の場合
  console.debug('表示');
}

is(':visible')でも判定できます。「:visible」は表示されている要素を抽出するためのもので、これと「is()」を組み合わせて利用します。

if ($('#obj').is(':visible')) {
  // 表示の場合
  console.debug('表示');
} else {
  // 非表示の場合
  console.debug('非表示');
}

is(':hidden') でも判定できます。「:hidden」は「:visible」とは反対に、表示されていない要素を抽出するためのもので、これと「is()」を組み合わせて利用します。

if ($('#obj').is(':hidden')) {
  // 非表示の場合
  console.debug('非表示');
} else {
  // 表示の場合
  console.debug('表示');
}

jQueryで要素の表示と非表示を判定する方法を紹介しました。

jQueryでは、要素の表示・非表示のために、show()、hide() メソッドが提供されています。show() は display プロパティを block にし、hide() は display プロパティを none にします。でも isShow() や isHide() はないんですよねー。あってもよさそうなんだけど・・・・。

ちなみに jQuery 3.0 では、display: none がセットされた要素に show() をおこなっても display を上書くことはしなくなりました。つまり、display: block は差し込まず display: none を消すだけの仕様に変更になったようですね。この辺りは使うバージョンを事前にチェックし、入念に検証しましょう。