UI要素の表示／非表示を判別するには？［JavaScript／jQuery］：.NET TIPS
JavaScriptでjQueryを使用して、UI要素の表示／非表示状態を判別するには、display／visibility／opacityプロパティやフィルターを使用できる。
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より大きい値、または未指定 |
jQueryで表示／非表示を切り替えるときは、displayプロパティが使われる。
なお、opacityを0.0にして非表示にすると、見えないにも関わらず、マウスクリックなどのイベントは発生する。
jQueryで表示／非表示を判別には？（その1）
表示／非表示にするときに使ったCSSのプロパティを調べればよい。例えば、visibilityプロパティを使って表示／非表示を切り替えているときに、id属性が「target」の要素が非表示かどうかを調べるコードは次のようになる。
var isHidden = $("#target").css("visibility") === "hidden"
|| $("#target").css("visibility") === "collapse";
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");
visible／hiddenという名前からはCSSのvisibilityプロパティを調べているように思えるが、実際にはdisplayプロパティを検査している。
ただし、このフィルターはCSSのdisplayプロパティを見ている。そのため、それ以外のプロパティ（visibilityプロパティやopacityプロパティ）を使って表示／非表示を切り替えていると、想定した結果が得られない。例えば、visibilityプロパティにhidden、displayプロパティにblockと設定されていると、実際には表示されていないのだが、「:visible」フィルターは（displayプロパティの値によって）trueを返す。
まとめ
jQueryでUI要素の表示／非表示を切り替えるには、show／hide／toggleメソッドなどが利用できる。その場合にUI要素の表示状態を判別するには、「:visible」フィルター／「:hidden」フィルターを使おう。
カテゴリ：JavaScript 処理対象：DOM
カテゴリ：オープンソース・ライブラリ 処理対象：JavaScript
使用ライブラリ：jQuery
関連TIPS：jQueryと「linq.js」を連携させてDOMをLINQにより処理するには？
Copyright© Digital Advantage Corp. All Rights Reserved.