連載
» 2016年04月06日 05時00分 UPDATE

.NET TIPS:UI要素の表示/非表示を判別するには?[JavaScript/jQuery]

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

[山本康彦,BluewaterSoft/Microsoft MVP for Windows Development]
.NET TIPS
Insider.NET

 

「.NET TIPS」のインデックス

連載目次

 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を返す。

まとめ

 jQueryでUI要素の表示/非表示を切り替えるには、show/hide/toggleメソッドなどが利用できる。その場合にUI要素の表示状態を判別するには、「:visible」フィルター/「:hidden」フィルターを使おう。

カテゴリ:JavaScript 処理対象:DOM
カテゴリ:オープンソース・ライブラリ 処理対象:JavaScript
使用ライブラリ:jQuery
関連TIPS:jQueryと「linq.js」を連携させてDOMをLINQにより処理するには?


「.NET TIPS」のインデックス

.NET TIPS

Copyright© 1999-2017 Digital Advantage Corp. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

Focus

- PR -

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。