JavaScript 要素を表示/非表示にするサンプル(displayとvisibility)

nas2017/08/20

JavaScriptの要素を表示または非表示にするサンプルです。
cssのdisplayプロパティまたはvisibilityプロパティを使用します。

目次

サンプル displayで表示と非表示にするサンプル
visibilityで表示と非表示にするサンプル

displayで表示と非表示にするサンプル

ボタン1を押すと文言が表示されます。再度押すと非表示になります。
表示/非表示でボタンの位置がずれます。非表示にした時、スペースがないことになっています。

テスト１

 

上記サンプルのコードです。

<p id="p1">テスト１</p>
<input type="button" value="ボタン1" onclick="clickBtn1()" />

<script>
//初期表示は非表示
document.getElementById("p1").style.display ="none";

function clickBtn1(){
	const p1 = document.getElementById("p1");

	if(p1.style.display=="block"){
		// noneで非表示
		p1.style.display ="none";
	}else{
		// blockで表示
		p1.style.display ="block";
	}
}
</script>

2行目のボタンをクリックすると8行目の関数を実行します。
6行目は、初期表示でdisplayプロパティにnoneを指定して1行目を非表示にしています。
13行目は、displayプロパティにnoneを指定して1行目を非表示にしています。
16行目は、displayプロパティにblockを指定して1行目を表示しています。

displayプロパティ

 

visibilityで表示と非表示にするサンプル

ボタン2を押すと文言が表示されます。再度押すと非表示になります。
表示/非表示を切り替えてもボタンの位置はずれません。非表示のときでもスペースが確保されます。

テスト１

 

上記のサンプルのコードです。

<p id="p2">テスト１</p>
<input type="button" value="ボタン２" onclick="clickBtn2()" />

<script>
//初期表示は非表示
document.getElementById("p2").style.visibility ="hidden";

function clickBtn2(){
	const p2 = document.getElementById("p2");

	if(p2.style.visibility=="visible"){
		// hiddenで非表示
		p2.style.visibility ="hidden";
	}else{
		// visibleで表示
		p2.style.visibility ="visible";
	}
}
</script>

2行目のボタンをクリックすると8行目の関数を実行します。
6行目は、初期表示でvisibilityプロパティにhiddenを指定して1行目を非表示にしています。
13行目は、visibilityプロパティにhiddenを指定して1行目を非表示にしています。
16行目は、visibilityプロパティにvisibleを指定して1行目を表示しています。

visibilityプロパティ

関連の記事

JavaScript getElementByIdでIDから値を取得
JavaScript constとletとvarの違い

△上に戻る