ボタン表示非表示の切替 | JavaScript

初版2008/04/14：最終更新日2013/01/11

ボタン表示非表示の切替

ボタンを表示したり非表示にしたりするには、以下を使用します。

document.getElementById("").style.visibility = "visible";
document.getElementById("").style.visibility = "hidden";

指定できるのは"visible"、"hidden"、"collapse"のいずれかです。
ボタンにcollapseを指定するとhiddenと同じのようです。

以下、ソースです。

<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="消すボタン(hidden)" id="1" onclick="a()">
<input type="button" value="消えるボタン" id="2" >
<input type="button" value="戻すボタン" id="3" onclick="b()">
<input type="button" name="button1" value="消すボタン(collapse)" id="4" onclick="c();" > 
<script language="JavaScript">
<!--
function a(){
    document.getElementById("2").style.visibility = "hidden";
}
function b(){
    document.getElementById("2").style.visibility = "visible";
}
function c(){
    document.getElementById("2").style.visibility = "collapse";
}
// -->
</script>
</body></html>

Information