お だ の ぶな パチンコk8 カジノUI要素の表示/非表示を判別するには?[JavaScript/jQuery]仮想通貨カジノパチンコ人気 mmo rpg

お だ の ぶな パチンコk8 カジノUI要素の表示/非表示を判別するには?[JavaScript/jQuery]仮想通貨カジノパチンコ人気 mmo rpg

キャッシュ ゲーム カジノk8 カジノ .NET TIPSInsider.NET

船堀 スロット 

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

連載目次

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

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

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

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

CSSプロパティ値の範囲表示/非表示の指定displayinline/block/noneなど非表示:none表示:none以外、または未指定visibilityvisible/hidden/collapse非表示:hidden/collapse表示:visibleまたは未指定opacity0.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 TIPSjQueryと「linq.js」を連携させてDOMをLINQにより処理するには?DataGridコントロールで並び替え順やフィルタを指定するには?DOMの子要素を探索するには?[JavaScript/jQuery]「.NET TIPS」のインデックス

「.NET TIPS」

仮想通貨カジノパチンコamazon fire tv stick jsports

コメントを残す