- HOME
- JavaScript入門
- 表示・非表示
ここでは、画像や文書を表示したり消したりする方法について見ていきます。 ツリーメニューを作ったり、ゲームのキャラの表示をON/OFFしたりと用途は様々です。
表示・非表示を扱う方法は2通りあります。displayとvisibilityです。 この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で非表示です。
- 非表示にしてもその空間はそのまま何も表示されずに残ります。