■ レイアウト枠（レイヤー）をボタンで表示/非表示にする

「CSSサンプル」や「DHTMLサンプル」で、レイアウト枠（レイヤー）を説明いたしました。

今回、 「表示/非表示」を行うにはスタイル属性の「visibility」を使用します。
詳しくは、「HTMLの解説」−「14.スタイル属性」をご参照下さい。

また、「CSSサンプル（カスケーディングスタイルシート）」−「画像を好きな位置に表示する（レイアウト枠（レイヤー））」や「文字を好きな位置に表示する（レイアウト枠（レイヤー））」、「画像の重ね合わせ」、
「DHTMLサンプル」−「オンマウスで画像の表示非表示1」、「オンマウスで画像の表示非表示2」 なども参考にして下さい。

今回のサンプルは、ボタンを押すたびレイアウト枠（レイヤー）の「表示/非表示」を切替えます。
（表示→非表示→表示→非表示→．．）
このような処理のことを「フリップフロップ」といいます。
※フリップフロップとは、公園などにある「シーソー」のことで、「ぎっこん、ばったん」と片方ずつ交互にスイッチが入るものや、2つの状態が交互に反転するようなものの事を総称して言います。

◆ 実行サンプル

【　解　　　　説　】

まず、文字列を記述したレイアウト枠（レイヤー）を用意します。
上記で説明したとおり、スタイル属性に「position:absolute」、「top」、「left」を指定します。
今回はレイアウト枠（レイヤー）が1つなので「z-index」は使用しません。
ただ、文字データだけだと「表示/非表示」が解かりにくいので、背景に色を付けています。

また、今回は「name」属性を使わず、「id」属性でレイアウト枠（レイヤー）の名前を特定します。
このサンプルでは「id="div1"」としました。

<div id="div1" style="position:absolute; top:500px; left:20px; width:80px; height:40px; z-index:1;background-color: #ffccff;">テストサンプルの表示</div>

※「z-index」はレイアウト枠（レイヤー）同士が重なった時の表示順序で、数字が大きくなるほど、より上に表示されます。

次に、「表示/非表示」を切り替えるボタンを配置したフォームをひとつ用意します。
このフォームに名前は必要ありません。

<form>
<input type="button" value="レイアウト枠（レイヤー）の表示/非表示を交互に切り替える" onclick="div_flip()">
</form>

ボタンが押された時の処理は「DHTMLサンプル」で説明した「onclick=""」を使用し、その処理はJavascriptの「div_flip()」というサブルーチンで処理させるように指定しておきます。

「id」属性を使用して名前を特定する場合は、「document.all['（id属性の名前）']」という記述方法か「window.（id属性の名前）」を使います。
今回は「window.（id属性の名前）」を使ってみました。

上記の方法は、Internet Explorerでは使用できますが、それ以外のブラウザでは動作いたしません。
いろいろ調べましたところ、「getElementById()」を使用することにより可能だということがわかりました。

現在のレイアウト枠（レイヤー）の表示状態はスタイル属性の「visibility」で取得できますから、レイアウト枠（レイヤー）「div1」の表示状態は「document.getElementById(divnam).style.visibility」で取得できます。
そして その状態を「vflg」という変数にセットするのは次のように記述できます。
vflg = document.getElementById(divnam).style.visibility;

また、上記のレイアウト枠（レイヤー）をJavascriptで非表示にする場合は次のように指定します。
document.getElementById(divnam).style.visibility = 'hidden';

また、同様にJavascriptで表示したい場合は「visible」をセットするか、次のように指定を解除します。
document.getElementById(divnam).style.visibility = 'visible';

レイアウト枠（レイヤー）の状態を反転させるためには「if文」を使います。
表示中の状態には状態フラグが何もセットされてない場合と、「visible」がセットされている場合の2通りありますから、非表示中の「hidden」でチェックした方が簡単です。

したがって「if文」の条件は「vflg == 'hidden'」となり、それ以外は「else文」を使って次のように記述します。
if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; }
これらを記述した「div_flip()」のサブルーチンは次のようになります。
function div_flip() { divnam = "div1"; vflg = document.getElementById(divnam).style.visibility; if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; } }

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「divehideb.js」というファイル名で保存します。

function div_flip() { divnam = "div1"; vflg = document.getElementById(divnam).style.visibility; if (vflg == 'hidden'){ document.getElementById(divnam).style.visibility = 'visible'; }else{ document.getElementById(divnam).style.visibility = 'hidden'; } }

次に、HEAD句内にJavascriptの呼び出しを次のように記述します。

<script type="text/javascript" src="divhideb.js"></script>

テキストを記述した次のようなレイアウト枠（レイヤー）をbodyタグの直後ぐらいに記述します。

<div id="div1" style="position:absolute; top:500px; left:20px; width:80px; height:40px; z-index:1;background-color: #ffccff;">テストサンプルの表示</div>

最後にレイアウト枠（レイヤー）を「表示/非表示」するためのボタンを次のように記述します。

<input type="button" value="レイアウト枠（レイヤー）の表示/非表示を交互に切り替える" onclick="div_flip()" onclick="div_flip()">