UI要素の表示／非表示を判別するには？［JavaScript／jQuery］：.NET TIPS

JavaScriptでjQueryを使用して、UI要素の表示／非表示状態を判別するには、display／visibility／opacityプロパティやフィルターを使用できる。

» 2016年04月06日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

　WebページのDOM（Document Object Model）をJavaScriptで操作するときに、jQueryはとても便利なライブラリだ。UI要素の表示／非表示を切り替えることも簡単にできる。では逆に、あるUI要素の表示状態を判別するにはどうすればよいだろうか？

　本稿では、UI要素の表示／非表示を設定する方法について整理した上で、jQueryで表示状態を取得する方法を解説する。

CSSでUI要素の表示／非表示を設定する三通りの方法

　CSSで表示／非表示を設定する方法は、一通りではない。恐らくそれが混乱の元になっているのだと思う。その主な方法は、次の表に示すように三通りある。そして、jQueryのshow／hide／toggleメソッドで表示を切り替えるときには、displayプロパティが使われるのである。


CSSプロパティ	値の範囲	表示／非表示の指定
display	inline／block／noneなど	非表示：none 表示：none以外、または未指定
visibility	visible／hidden／collapse	非表示：hidden／collapse 表示：visibleまたは未指定
opacity	0.0～1.0	非表示：0.0 表示：0より大きい値、または未指定

表示／非表示の設定に利用できるCSSのプロパティ
jQueryで表示／非表示を切り替えるときは、displayプロパティが使われる。
なお、opacityを0.0にして非表示にすると、見えないにも関わらず、マウスクリックなどのイベントは発生する。

jQueryで表示／非表示を判別には？（その1）

　表示／非表示にするときに使ったCSSのプロパティを調べればよい。例えば、visibilityプロパティを使って表示／非表示を切り替えているときに、id属性が「target」の要素が非表示かどうかを調べるコードは次のようになる。

var isHidden = $("#target").css("visibility") === "hidden"
|| $("#target").css("visibility") === "collapse";

jQueryでCSSのプロパティを調べるコードの例（JavaScript）

jQueryで表示／非表示を判別には？（その2）

　jQueryには、表示／非表示を判定するためのフィルターがある。

　jQueryのshow／hide／toggleメソッドなどを利用して表示／非表示を切り替える場合は、前述したようにCSSのdisplayプロパティが使われる。そこで、上に示したコードと同様にしてdisplayプロパティを調べてもよいのだが、jQueryには特定の状態にある要素を調べるための「フィルター」が用意されている。jQueryのメソッドで表示／非表示を切り替えたいときは、このフィルターで表示状態を取得するようにしよう（仮にjQueryが表示／非表示を切り替える方法を変更したとしても、フィルターの動作は互換性を保つだろう）。

　jQueryで表示／非表示の状態を調べるには、「:visible」フィルター／「:hidden」フィルターが利用できる（次のコード）。

var isHidden = $("#target").is(":hidden");
var isVisible = $("#target").is(":visible");

jQueryのフィルターで表示状態を調べるコードの例（JavaScript）
visible／hiddenという名前からはCSSのvisibilityプロパティを調べているように思えるが、実際にはdisplayプロパティを検査している。

　ただし、このフィルターはCSSのdisplayプロパティを見ている。そのため、それ以外のプロパティ（visibilityプロパティやopacityプロパティ）を使って表示／非表示を切り替えていると、想定した結果が得られない。例えば、visibilityプロパティにhidden、displayプロパティにblockと設定されていると、実際には表示されていないのだが、「:visible」フィルターは（displayプロパティの値によって）trueを返す。