.net column
.NET開発者のためのブログメディア

Webアプリケーションの作成

jqueryでのhiddenの使い方|選択される隠された要素もあわせて解説

2020年03月26日
PL
visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。
PG
なるほど…!

jqueryにおけるhiddenとhideとの違い


jqueryには要素の表示状態に関する機能がいくつかありますが、その中でも非表示な要素に対する機能としてhiddenとhideがあります。今回はhiddenとhideの違いやそれぞれの使い方について解説していきます。ぜひ、参考にしてください。

構文から見る違い

jqueryにおけるhiddenとはセレクタです。セレクタで要素を取得するときに:(コロン)に続けてhiddenを設定すると画面上で非表示になっている要素を選択することができます。

jqueryにおけるhideとはメソッドです。jquery要素にhideメソッドを使うことで要素を非表示にすることができます。

使い方から見る違い

hiddenセレクタは以下のように使います。

hideメソッドは以下のように使います。

hiddenを設定することによって選択される隠された要素3つ


hiddenセレクタは画面に表示されていない要素を取得することができます。表示されていない要素には、透明度・幅・高さが0である、編集フォームでtypeがhiddenである、CSS設定においてdisplayがnoneである、の3つのパターンがあります。

1:透明度・幅・高さが0である

CSSのwidth、heightプロパティなどで幅と高さを0に設定すると、その要素は画面に表示されなくなります。また、fadeOutメソッドを使うとアニメーションしながら要素を隠すことができ、その要素は透明度が0になり画面に表示されなくなります。hiddenセレクタではこれらの要素を取得することができます。

2:編集フォームでtypeがhiddenである

フォーム要素はtypeに設定した値によってさまざまなコントロールになりますが、typeにhiddenを設定すると画面に表示されないコントロールになります。hiddenセレクタではこの画面に表示されないコントロールを取得することができます。

3:css設定においてdisplayがnoneである

CSSのdisplayプロパティは要素の表示形式を決めるもので、blockやinline、inline-blockなどを設定できます。このdisplayプロパティにnoneを指定するとその要素は非表示になります。hiddenセレクタではこの非表示になった要素を取得することができます。

jqueryでのhiddenの使い方7つ


では、実際にjqueryでhiddenセレクタを使う方法について解説していきます。

hiddenセレクタの使い方としては、name属性を使った値の取得および設定、id属性を使った値の取得および設定、カンマ区切りで複数値の取得および設定があります。

これらについてサンプルコードを交えて説明します。また、hiddenと似た意味を持つvisibilityの使い方についても説明します。

1:nameを使用してhiddenに値を設定する方法

name属性を使用してhiddenな要素に値を設定します。サンプルコードは以下のようになります。

2:nameを使用してhiddenの値を取得する方法

name属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。

3:idを使ってhiddenの値を設定する方法

id属性を使用してhiddenな要素の値を設定します。サンプルコードは以下のようになります。

4:idを使ってhiddenの値を取得する方法

id属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。

5:hiddenに配列をカンマ区切りで設定する方法

hiddenな要素に配列をカンマ区切りで設定します。サンプルコードは以下のようになります。

6:カンマ区切りのhiddenデータを配列として取得する方法

カンマ区切りのhiddenな要素の値を配列として取得します。サンプルコードは以下のようになります。

7:hiddenと似た意味を持つvisibilityプロパティの使い方

visibilityプロパティは、要素の表示形式を変更できるCSSのプロパティの一つです。visibilityプロパティでは、以下のような値を使ってjqueryの中で次のように記述します。
■要素を表示
要素名.style.visibility = “visible”;

■要素の非表示
要素名.style.visibility = “hidden”;

■要素を詰めて非表示
要素名.style.visibility = “collapse”;

同じように表示・非表示を切り替えるプロパティに [display: none] が挙げられますが、displayプロパティは要素分の領域を詰めるのに対し、visibilityプロパティでは要素分の領域を確保するため、レイアウトが崩れにくいというメリットがあります。

ただし、一点注意点として“Internet Explorerには対応していない”ということを覚えておきましょう。

<補足>
Internet Explorer(IE)は、今回のvisibilityプロパティをはじめ他のプロパティなどにも対応していないことが多いです。開発を行う環境としてIEは優れていないため、もし現在IEを使用しているのであれば他のブラウザに切り替えることをおすすめします。

visibilityプロパティを使って表示・非表示を切り替えてみよう

ここでは、実際にvisibilityプロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。

実行すると、次のような結果になります。

では、真ん中のロゴを非表示にしてみましょう。

すると・・・

ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。

jqueryでhiddenを使うときの注意点


:hiddenセレクタはjqueryの拡張機能であり、CSSの仕様には含まれていないセレクタです。このため、他セレクタと比べると処理が若干重くなります。

対処法としてはCSSのセレクタで要素を選択したのちにトラバースのfilterメソッドで再度絞り込むようにする方法があります。

PL
このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。
PG
分かりました!

必要に応じてhiddenやvisibilityプロパティを活用していこう


jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags