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

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

目次

displayのサンプル

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

テスト1

コード

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

<p id="p1">テスト1</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のサンプル

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

テスト1

コード

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

<p id="p2">テスト1</p>
<input type="button" value="ボタン2" 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 ID属性で取得/設定する(getElementById)
JavaScript 変数の宣言のvar/let/constの違い

△上に戻る