.NET開発者のためのブログメディア
jqueryでのhiddenの使い方｜選択される隠された要素もあわせて解説
- PL
- visibilityプロパティを使うと、隠された要素の中の一部だけを表示するなどの小回りが効くんですよ。
- PG
- なるほど…！
目次
jqueryにおけるhiddenとhideとの違い
jqueryには要素の表示状態に関する機能がいくつかありますが、その中でも非表示な要素に対する機能としてhiddenとhideがあります。今回はhiddenとhideの違いやそれぞれの使い方について解説していきます。ぜひ、参考にしてください。
構文から見る違い
jqueryにおけるhiddenとはセレクタです。セレクタで要素を取得するときに：（コロン）に続けてhiddenを設定すると画面上で非表示になっている要素を選択することができます。
jqueryにおけるhideとはメソッドです。jquery要素にhideメソッドを使うことで要素を非表示にすることができます。
使い方から見る違い
hiddenセレクタは以下のように使います。
|
1 2 3 4 5 6 7 |
// :hiddenのみを指定すると画面内の全ての非表示な要素を取得する let allHiddenItem = $(":hidden"); // inputのような要素セレクタの後に:hiddenを指定すると指定した要素のうち非表示な要素を取得する let hiddenInputItem = $("input:hidden"); |
hideメソッドは以下のように使います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>jqueryでhideメソッドを使うサンプル</title> </head> <body> <div id="div_1"> this is div_1 </div> <!-- hide/showボタンで表示が切り替わる --> <div id="div_2"> this is div_2 </div> <div id="div_3"> this is div_3 </div> <input type="button" id="button_hide" value="hide"/> <input type="button" id="button_show" value="show"/> <script> $("#button_hide").click(function(){ $("#div_2").hide(); // #div_2要素を非表示にする }); $("#button_show").click(function(){ $("#div_2").show(); // #div_2要素を表示する }); </script> </body> </html> |
hiddenを設定することによって選択される隠された要素3つ
hiddenセレクタは画面に表示されていない要素を取得することができます。表示されていない要素には、透明度・幅・高さが０である、編集フォームで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な要素に値を設定します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>name属性を使用してhiddenなinput要素へ値を設定するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_value"></span> </div> <form> <input type="hidden" id="hidden_input_1" name="hidden-input-1" value="value1"/> <input type="button" id="button_get" value="設定"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を設定する $('input:hidden[name="hidden-input-1"]').val('new Value'); let hiddenValue = $('input:hidden[name="hidden-input-1"]').val(); $("#display_value").text(hiddenValue); }); $("#button_clear").click(function(){ $("#display_value").text(''); }); </script> </body> </html> |
2：nameを使用してhiddenの値を取得する方法
name属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>name属性を使用してhiddenなinput要素から値を取得するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_value"></span> </div> <form> <input type="hidden" id="hidden_input_2" name="hidden-input-2" value="value2"/> <input type="button" id="button_get" value="取得"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // input要素のうち非表示なもので、nameが"hidden-input-1"の要素を取得し、valメソッドで値を取得する let hiddenValue = $('input:hidden[name="hidden-input-2"]').val(); $("#display_value").text(hiddenValue); }); $("#button_clear").click(function(){ $("#display_value").text(''); }); </script> </body> </html> |
3：idを使ってhiddenの値を設定する方法
id属性を使用してhiddenな要素の値を設定します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>id属性を使用してhiddenなinput要素へ値を設定するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_value"></span> </div> <form> <input type="hidden" id="hidden_input_3" name="hidden-input-3" value="value3"/> <input type="button" id="button_get" value="設定"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // idが"#hidden_input_3"の要素を取得し、valメソッドで値を設定する $("#hidden_input_3").val("new Value"); let hiddenValue = $("#hidden_input_3").val(); $("#display_value").text(hiddenValue); }); $("#button_clear").click(function(){ $("#display_value").text(''); }); </script> </body> </html> |
4：idを使ってhiddenの値を取得する方法
id属性を使用してhiddenな要素の値を取得します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>id属性を使用してhiddenなinput要素の値を取得するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_value"></span> </div> <form> <input type="hidden" id="hidden_input_4" name="hidden-input-4" value="value4"/> <input type="button" id="button_get" value="設定"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // idが"#hidden_input_4"の要素を取得し、valメソッドで値を取得する let hiddenValue = $("#hidden_input_4").val(); $("#display_value").text(hiddenValue); }); $("#button_clear").click(function(){ $("#display_value").text(''); }); </script> </body> </html> |
5：hiddenに配列をカンマ区切りで設定する方法
hiddenな要素に配列をカンマ区切りで設定します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>hiddenに配列をカンマ区切りで設定するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_value"></span> </div> <form> <input type="hidden" id="hidden_input_5" name="hidden-input-5" value="value5"/> <input type="button" id="button_get" value="設定"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // hiddenな要素にvalメソッドで配列を値として設定することができる $("#hidden_input_5").val(["red", "blue", "green"]); // valメソッドで配列を値として設定するとカンマ区切りの値で保存される let hiddenValue = $("#hidden_input_5").val(); $("#display_value").text(hiddenValue); }); $("#button_clear").click(function(){ $("#display_value").text(''); }); </script> </body> </html> |
6：カンマ区切りのhiddenデータを配列として取得する方法
カンマ区切りのhiddenな要素の値を配列として取得します。サンプルコードは以下のようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <title>hiddenのカンマ区切りの値を配列として取得するサンプル</title> </head> <body> <div> hiddenなinput要素の値:<span id="display_input_value"></span> </div> <div> 取得した配列:<span id="display_get_value"></span> </div> <form> <input type="hidden" id="hidden_input_6" name="hidden-input-6" value="red,green,blue"/> <input type="button" id="button_get" value="設定"/> <input type="button" id="button_clear" value="クリア"/> </form> <script> $("#button_get").click(function(){ // 配列を値として設定した要素から値を取得するとカンマ区切りの値で取得される let hiddenValue = $("#hidden_input_6").val(); // カンマ区切りの値を配列にするにはsplitメソッドを使用する let splitted = hiddenValue.split(","); $("#display_input_value").text(JSON.stringify(hiddenValue)); $("#display_get_value").text(JSON.stringify(splitted)); }); $("#button_clear").click(function(){ $("#display_input_value").text(""); $("#display_get_value").text(""); }); </script> </body> </html> |
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プロパティを使って要素の表示・非表示を切り替えていきます。
ソースコードは次のとおりです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> // ロゴを可視 function visible(){ var logo1 = document.getElementById("limitedLogo"); logo1.style.visibility = "visible"; } // ロゴを不可視 function unvisible(){ var logo1 = document.getElementById("limitedLogo"); logo1.style.visibility = "hidden"; } </script> |
|
1 2 3 4 5 6 7 8 9 |
<div class="logo_disp"> <img id="limitedLogo" class="logo" src="logo.png"><br/> <div> <input type="button" value="表示" onclick="visible();"/> <input type="button" value="非表示" onclick="unvisible();"/> </div> </div> |
実行すると、次のような結果になります。
では、真ん中のロゴを非表示にしてみましょう。
すると・・・
ロゴは非表示となっていますが、ロゴがあった場所は残っていることが分かりますね。これがvisibilityプロパティの最大の特徴です。ちなみにvisibilityプロパティを使わずに [display] プロパティを使うと、次のような表示となります。
jqueryでhiddenを使うときの注意点
:hiddenセレクタはjqueryの拡張機能であり、CSSの仕様には含まれていないセレクタです。このため、他セレクタと比べると処理が若干重くなります。
対処法としてはCSSのセレクタで要素を選択したのちにトラバースのfilterメソッドで再度絞り込むようにする方法があります。
- PL
- このように、それぞれのプロパティやメソッドの特徴を知っておくと、ウェブページを作成するときにも役立ちますよ。
- PG
- 分かりました！
必要に応じてhiddenやvisibilityプロパティを活用していこう
jQueryでは表示・非表示を切り替えるためのさまざまなプロパティやメソッドが用意されているため、比較的visibilityプロパティの出番は少ないかもしれません。しかし、“要素分の領域を確保したまま非表示にできる”という特徴があるなど、使い方によっては非常に便利なプロパティなので、ぜひ上手く活用してみてください。
