表示・非表示JavaScript入門

displayを使った表示・非表示

では最初にdisplayを使った表示・非表示の方法について見てみましょう。 以下のスクリプトをHTMLのBody内に記入して下さい。

<div id="disp">この文章を表示したり消したりします。</div>

<form>
<input type="button" value="表示" onclick="hyoji1(0)">
<input type="button" value="非表示" onclick="hyoji1(1)">
</form>

<script>

function hyoji1(num)
{
  if (num == 0)
  {
    document.getElementById("disp").style.display="block";
  }
  else
  {
    document.getElementById("disp").style.display="none";
  }
}

</script>

＜サンプル＞

では上記スクリプトについて説明します。

HTML部分

まずdivタグにid属性を付け、id名は「disp」にしました。 そしてボタンを２つ設置し、関数hyoji1()を呼び出すようにしています。 引数を使って表示か非表示かを分岐しています。

JavaScript部分

関数hyoji1()の引数を用いて、if～else文を使って分岐します。 引数が0の時は表示、それ以外なら非表示です。

displayを使って表示・非表示を指示しています。 「block」を指定するとブロック要素として表示し、 「none」を指定すると非表示になります。

displayを使って非表示にすると、その空間が無くなって下の部分が繰り上がります。 上のサンプルでも、非表示にするとその下のボタンが上に移動したと思います。

visibilityを使った表示・非表示

今度はvisibilityを使った表示・非表示です。 HTMLのBody内に以下のスクリプトを記入してみてください。

<div id="visi">この文章を表示したり消したりします。</div>

<form>
<input type="button" value="表示" onclick="hyoji2(0)">
<input type="button" value="非表示" onclick="hyoji2(1)">
</form>

<script>

function hyoji2(num)
{
  if (num == 0)
  {
    document.getElementById("visi").style.visibility="visible";
  }
  else
  {
    document.getElementById("visi").style.visibility="hidden";
  }
}

</script>

＜サンプル＞

このスクリプトはdisplayの時と大体同じです。 違うのはid名が「visi」になっているのと、関数名がhyoji2になっている点です。

visibilityを使って表示をON/OFFするには、 右辺に「visible」，「hidden」を指定します。 前者が表示で後者が非表示です。

displayと違うのは、非表示にした時です。 visibilityで消した時は、その空間がそのまま残ります。 下の行が繰り上がることはありません。

では、まとめておきます。

document.getElementById("id名").style.display

blockでブロック要素として表示、noneで非表示です。

非表示にすると、その空間に下の部分が繰り上がってきます。

inlineを設定すると、インライン要素として表示できます。

document.getElementById("id名").style.visibility

visibleで表示、hiddenで非表示です。

非表示にしてもその空間はそのまま何も表示されずに残ります。