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

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

目次

displayのサンプル

displayプロパティを使用したサンプルです。
ボタン1を押すと文言が表示されます。
再度押すと非表示になります。

テスト1

コード

上記のサンプルのコードです。
12行目は、初期表示でdisplayプロパティにnoneを指定して非表示にしています。
19行目は、displayプロパティにnoneを指定して非表示にしています。
22行目は、displayプロパティにblockを指定して表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>表示/非表示のサンプル</title>
</head>
<body >
<p id="p1">テスト1</p>
<input type="button" value="ボタン1" onclick="btn1_click()" /><br/>
<script>
//初期表示は非表示
document.getElementById("p1").style.display ="none";

function btn1_click(){
	var y1 = document.getElementById("p1");

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

displayプロパティ

visibilityのサンプル

visibilityプロパティを使用したサンプルです。
ボタン2を押すと文言が表示されます。
再度押すと非表示になります。

テスト1

コード

上記のサンプルのコードです。
2行目は、初期表示でvisibilityプロパティにhiddenを指定して非表示にしています。
9行目は、visibilityプロパティにhiddenを指定して非表示にしています。
12行目は、visibilityプロパティにvisibleを指定して表示しています。

<script>
document.getElementById("p2").style.visibility ="hidden";

function btn2_click(){
	var y1 = document.getElementById("p2");

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

visibilityプロパティ

関連の記事

jQuery 要素を表示/非表示にするサンプル(showとhide)




△上に戻る