梅ちゃん堂 > JavaScript 入門 > JavaScript 実用編 >
- レイヤーの制御 -

レイヤーについて

DHTML の基本となるオブジェクトをレイヤーと呼びます。 Netscape 4.x には <LAYER> という独自のタグがあり、それによって個々のレイヤーを定義しました。 また document.layers というオブジェクトがあって、 そのメソッドやプロパティを使ってレイヤーを操作することが出来ました。

しかし Netscape 4.x 以外のブラウザは、Netscape 6.x〜7.x も含めて <LAYER> タグを認識しませんし、 document.layers というオブジェクトも知りません。実は Internet Explorer 4.x 以降や、Netscape 6.x 以降などのブラウザでは、 レイヤーという名前の特別なタグやオブジェクトを使わなくても、 基本的にほとんどすべての文書要素(画像、フォーム、或いはひとまとまりの文章でさえ)が操作可能なレイヤーオブジェクトとなっています。

以下ではクロスブラウザなレイヤーを作成するという方針から、<DIV> タグとスタイルシートを使ってレイヤーを作成する方法を述べます。

レイヤーの作成

レイヤーを作成するには <DIV> タグの style 属性に "position: absolute;" を加え、 id 属性でそれに名前を付ける必要があります。

<DIV style="position: absolute;" id="layer1">これはレイヤーです。</DIV>

これがクロスブラウザなレイヤーの最低限の要素です。 これによって Nescaoe 4.x〜6.x 以上、Internet Explorer 4.x 以上、及び Opera 6.x など DHTML をサポートするブラウザでレイヤーとして機能します。

スタイル要素の style="position: absolute;" は直接タグに入れる方法のほかに、 HTML ヘッダ内の <STYLE> タグで定義する方法、または外部スタイルシートファイルで定義する方法があります。 その場合、

DIV { position: absolute; }

とすればページ内のすべての <DIV> タグが自動的にレイヤーとなりますし、それが不都合なら、

<DIV class="layer" id="layer1">これはレイヤーです。</DIV>

とした上で、

DIV.layer { position: absolute; }

とすれば class 名に "layer" を持つ <DIV> タグだけをレイヤーにすることが出来ます。

また、

#layer1 { position: absolute; }

とすると、少なくとも "layer1" という id 名を持つタグだけはレイヤーにすることができます。

レイヤーの様々な特徴(位置、大きさ、文字色、背景色、枠取り、等々)はスタイルシートで初期定義します。

<DIV style="position: absolute; top: 100px; left: 100px; color: white; background: navy; border: none; padding: 10px; text-align: center;" id="layer1">これはレイヤーです。</DIV>

レイヤーの取得

レイヤーを JavaScript で操作するには、まず当のレイヤーにアクセスできなければなりません。 しかしその方法は、ブラウザによって違いがあります。キーとなるのは上記のように id 属性の値です。

Internet Explorer 4.x 以上では、
layerObj = document.all["layer1"];

Netscape 6.x 以上、Internet Explorer 5.x 以上、Opera では、
layerObj = document.getElementById("layer1");

によって layerObj にレイヤーオブジェクトを取得します。

Netscape 4.x では、
layerObj = document.layers["layer1"];

によってレイヤーオブジェクトが取得できると一般に言われています(JavaScript の入門書などにもそう書かれています)。 ところがこれでは、

<DIV class="layer" id="parent_layer">これは親レイヤーです。
  <DIV class="layer" id="child_layer">これは子レイヤーです。
  </DIV>
</DIV>


のようにネストされたレイヤーの場合の子レイヤーを取得することは出来ません。

ネストされたレイヤー

例えば childLayer = document.layers["child_layer"] とやっても、エラーになります。他のブラウザの場合は childLayer = document.all["child_layer"]、 或いは childLayer = document.getElementById("child_layer"); で問題ありません。

実は Netscape 4.x のレイヤーの中には document 空間があり、 子レイヤーは親レイヤーの document に属しています。 従って子レイヤーの場合は、

childLayer = layerObj.document.layers["child_layer"];

のように親レイヤーの document の下位オブジェクトとして子レイヤーを指定しなければなりません。これは

childLayer = document.layers["parent_layer"].document.layers["child_layer"];

と同じことです。

レイヤーの操作

次に、レイヤーオブジェクトの操作の仕方ですが、Netscape 4.x とその他のブラウザとでかなりの違いがあります。 逆に Netscape 4.x 以外のブラウザでは概ね似通っていると言えます。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved