Aya's curiosity ボタンクリックで表示・非表示切り替え

ボタンクリックで表示・非表示切り替え

ボタンをクリックすると、指定したid名の要素を表示・非表示切り替えするJavaScriptの覚え書き。・オブジェクト.getElementById(id名)
　　指定されたID名を持つオブジェクトの情報を返す。
　　オブジェクトがdocumentであればドキュメント上のオブジェクトの中からID名を参照し
　　(document.getElementById(id名))、
　　 XMLデータであればXMLデータ上のオブジェクトの中からID名を検索し
　　該当するオブジェクトの情報を返す。
　　(XMLオブジェクト.getElementById(id名))

・document.getElementById(id名).style.visibility
　　指定したid名のスタイル(visibility)の値を取得する。
　　"visible"、"hidden"の値を与えて表示・非表示を指定することができる。

。。JavaScriptファイルの例。。(ファイル名divtest.js)


function disp(){
  //表示・非表示するid名
  var divname="samp";
  //現在のスタイル属性visibility値を取得
  var sflag=document.getElementById(divname).style.visibility;
  //現在hidden(非表示)の場合はvisible(表示)に
  //それ以外の場合はhidden(非表示)にする
  if(sflag=="hidden"){
	document.getElementById(divname).style.visibility="visible";
  }else{
	document.getElementById(divname).style.visibility="hidden";
  }
}

。。htmlファイルの例。。


<html>
<head>
  <!--使用するJavaScriptファイル-->
  <script type="text/javascript" src="divtest.js"></script>
</head>
<body>
  <!--クリックするとdisp()が呼び出される-->
  <form>
    <input type="button" value="ボタン" onclick="disp();" />
  </form>
  <!--ボタンをクリックすると表示・非表示されるテキスト-->
  <div id="samp" >表示・非表示</div>
</body>
</html>