JavaScript visibilityプロパティで要素を表示(非表示)するサンプル
環境
Google Chrome 106.0.5249.91
Windows 10 Home 64bit
構文
1.初期表示でvisibilityプロパティにhiddenを指定して要素を非表示します
document.getElementById(セレクター名).style.visibility ="hidden";
2.const 変数名 = document.getElementById(セレクター名);
変数名.style.visibility ="hidden";
visibilityプロパティにhiddenを指定して要素を非表示にしています。
変数名.style.visibility ="visible";
visibilityプロパティにvisibleを指定して要素を表示しています。
使用例
<!DOCTYPE html>
<html>
<body>
<p id="cft">study skill</p>
<input type="button" value="検証" onclick="addCheck()" />
<script>
// 初期表示でvisibilityプロパティにhiddenを指定して要素を非表示する
document.getElementById("cft").style.visibility = "hidden";
function addCheck(){
const tt = document.getElementById("cft");
if(tt.style.visibility=="visible") {
// visibilityプロパティにhiddenを指定して要素を非表示する
tt.style.visibility = "hidden";
} else {
// visibilityプロパティにvisibleを指定して要素を表示する
tt.style.visibility = "visible";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="cft">study skill</p>
<input type="button" value="検証" onclick="addCheck()" />
<script>
// 初期表示でvisibilityプロパティにhiddenを指定して要素を非表示する
document.getElementById("cft").style.visibility = "hidden";
function addCheck(){
const tt = document.getElementById("cft");
if(tt.style.visibility=="visible") {
// visibilityプロパティにhiddenを指定して要素を非表示する
tt.style.visibility = "hidden";
} else {
// visibilityプロパティにvisibleを指定して要素を表示する
tt.style.visibility = "visible";
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p id="cft">study skill</p>
<input type="button" value="検証" onclick="addCheck()" />
<script>
// 初期表示でvisibilityプロパティにhiddenを指定して要素を非表示する
document.getElementById("cft").style.visibility = "hidden";
function addCheck(){
const tt = document.getElementById("cft");
if(tt.style.visibility=="visible") {
// visibilityプロパティにhiddenを指定して要素を非表示する
tt.style.visibility = "hidden";
} else {
// visibilityプロパティにvisibleを指定して要素を表示する
tt.style.visibility = "visible";
}
}
</script>
</body>
</html>
実行結果
「検証」ボタンを押すと、「study skill」が表示されます。再度押すと非表示になります。
「検証」ボタンを押すと、「study skill」が表示されます。再度押すと非表示になります。
「検証」ボタンを押すと、「study skill」が表示されます。再度押すと非表示になります。