jQueryで要素の表示と非表示を判定する方法(display:none) ホームページ制作 | 墨田区

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

LINEで送る
Pocket

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

要素の表示・非表示って、つまり display: none にする方法と、display: none かどうかを判定する方法ってことになりますね。

実は jQuery で表示・非表示を判定する方法っていくつかあるんです。まあ一つ知っていれば応用できますが、せっかくなのでいくつか紹介したいと思います。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


jQuery で表示・非表示を判定する

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

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


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL