表示・非表示をDOMで扱う方法について解説

HOME
更新日:2013.10.04
HOMEJavaScript入門 > 表示・非表示

表示・非表示

ここでは、画像や文書を表示したり消したりする方法について見ていきます。 ツリーメニューを作ったり、ゲームのキャラの表示をON/OFFしたりと用途は様々です。

表示・非表示を扱う方法は2通りあります。displayvisibilityです。 この2つは非表示にした時に違いが出ます。

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」にしました。 そしてボタンを2つ設置し、関数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で非表示です。
非表示にしてもその空間はそのまま何も表示されずに残ります。