【javascript】【jquery】オブジェクトの表示非表示制御について

---

javascript,jqueryによるオブジェクト表示非表示制御に関する個人的なメモ

---

 

---

 

■display要素制御による表示非表示切替

表示に変更

// 「表示」に変更  
document.getElementById("display_control").style.display = "block";  

非表示に変更

// 「非表示」に変更  
document.getElementById("test").style.display = "none";  

以下のボタン押下で下の要素が消えたり出たりします(display版)

 

---

■visibility要素制御による表示非表示切替

表示に変更

// 「表示」に変更  
document.getElementById("display_control").style.visibility  = "visible";  

非表示に変更

// 「非表示」に変更  
document.getElementById("test").style.visibility = "hidden";  

以下のボタン押下で下の要素が消えたり出たりします(visibility版)

displayとvisibilityは、
「マジで存在自体消滅させる」のと「要素だけは残しておく」のとで違いがある。
displayを操作すると、その要素の存在自体を変更するため、
以降の要素が詰まるか押し出されるかの形でレイアウトが自動調節される。
一方、visibilityを操作しても、その要素の見た目が変更されるだけなので、
要素自体はそこに存在したままとなり、元のレイアウトが維持される。

visibility:hiddenの方は透明人間になったようなイメージに近い。
視認できないだけで存在はそこにある。

display:noneは、見た目上「完全にそこにいなかったことになる」わけだが、
visibility:hiddenもdisplay:noneも、要素のオブジェクト自体は残っているので、
オブジェクトにアクセスすることは可能である。
例えば以下のコードでは、初っ端からdisplay:none;のdivタグに対して、
ID指定でオブジェクトを取得してdisplay状態をalert表示するが、
ちゃんと「none」という値がとれる。
（nullになって意図せずJSエラーになったりしない、という意味）

<script type="text/javascript">  
function getDisplayStat() {  
  
	var displayStat = document.getElementById('test').style.display;  
	alert("対象オブジェクトのdisplay状態は"+displayStat+"です。");  
  
}  
</script>  
<div id=“test” style=“display:none;">

</div>

個人的には見た目が消えてくれればどっちでもいい。
どちらかというと過去の開発現場ではdisplayの方をよく見かけた印象である。

---

■jqueryによる表示非表示切替

toggleを使って行う。
単に表示非表示を切り替えるだけならこっちの方が実装が楽。

	$("#button_toggle_test").click(function(){  
		$("#toggle_control").toggle();  
	});  

以下のボタン押下で下の要素が消えたり出たりします(toggle版)

また、toggleにはいろいろオプションがあり、
「ゆっくり消える」「すばやく表示」とかの「切替速度指定」が可能である。
toggleの引数に「slow」や「fast」、もしくは「切替までにかかるミリ秒」を指定することで実現する。

	// speed : slow  
	$("#button_toggle_slow").click(function(){  
		$("#toggle_control").toggle("slow");  
	});  
<span style="color: green;">// speed : fast</span>  
$("#button_toggle_fast").click(function(){  
	$("#toggle_control")<span style="color: red; font-weight: bold;">.toggle("fast");</span>  
});  


<span style="color: green;">// speed : 2000ms</span>  
$("#button_toggle_2000").click(function(){  
	$("#toggle_control")<span style="color: red; font-weight: bold;">.toggle(2000);</span>  
});  

以下のボタン押下で下の要素がゆっくり消えたり出たりします(toggle;slow版)

以下のボタン押下で下の要素がはやく消えたり出たりします(toggle;fast版)

以下のボタン押下で下の要素が2秒かけて消えたり出たりします(toggle;2000ミリ秒版)

 

---

■jqueryによる表示非表示切替2

toggleと似たようなのに「slideToggle」というのがある。
toggleがフェードイン／アウトするような動きを実現するのに対し、
こっちはブラインドの開閉のような動きを実現する。
実装方法はtoggleと同じ。

	$("#button_slideToggle_test").click(function(){  
		$("#toggle_control_4").slideToggle();  
	});  

以下のボタン押下で下の要素がスライドで消えたり出たりします。

 

---

■jqueryによる表示非表示切替+α

toggleやslideToggleには「callback関数」というのがあり、
表示切替終了後に、別途定義してある個別処理を実行できる仕組みがある。
↑の実装例で「slow」等スピードを指定していた第一引数の後に、
第二引数としてfunctionを定義することで実現する。
例えば以下のやり方で２つの要素の表示切替を段階的に行うことができる。

	$("#button_toggle_callback").click(function(){  
		$("#toggle_control_5_1").toggle("slow",  
			  
			function(){  
				$("#toggle_control_5_2").toggle("slow");  
			});  
			  
	});  

まあこんな程度はcallback関数使わなくても可能か。。。

実際動かしてみればわかるが、
toggleやslideToggleは、スタイルシートのdisplay属性をいじくっている。
このため↑に書いたように要素自体の存在を操作しており、
レイアウトの自動調節がかかる。
その点でいえばjavascriptでスタイル変更するのと同じだが、
速度指定による表示非表示の表現方法やcallback関数の存在など、
jqueryのほうが出来る事の幅が広い（まあjquery全般に言えることだが）。

---