JavaScriptで特定のid属性を持つ要素の表示・非表示を切り替える

限られたスペースをいかに有効に使うことが出来るかで、ユーザーに伝えられる情報量は異なってきます。ここでは、特定のid属性を持つ要素の表示/非表示を切り替える JavaScript を紹介します。

Sample

id=’disp’ を表示/非表示

この要素のid属性はdispです。

JavaScript

JavaScriptは以下のように記述します。

function hide(id)
{
  if (document.getElementById(id).style.display == "none") {
    document.getElementById(id).style.display = "";
  }
  else {
    document.getElementById(id).style.display = "none";
  }
}

HTML

<button type=button  onclick="hide('disp')">id='disp' を表示/非表示</button>
<p id="disp">この要素のid属性はdispです</p>

解説

onclick=”hide(‘指定したid属性’)” で、指定したid属性のdisplayプロパティを取得し、”none”と””(空)を切り替えています。