技 巧 鍵 盤 ─ KeyNavi：キーボードを活用してホームページを快適に─    
■ キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] レイヤーの各種属性(位置,大きさ,...)を取得 ・サイトマップ [Shift-S]

■ レイヤーの各種属性(位置,大きさ,...)を取得：kl_layer_xxx()

レイヤーのID値(or オブジェクト)から その属性値(位置座標、大きさなど)を取得します。 各属性で共通した処理が多いので下記のように 「kl_layer_getattr()」としてまとめてしまいます。

【レイヤーの各種属性取得のための共通関数「kl_get_attr()」＜keynavi_tools.js】

KL_LAYER_ATTRS=new Array();
KL_LAYER_ATTRS["x"]=new Array("int","left","pixelLeft","left");
KL_LAYER_ATTRS["y"]=new Array("int","top", "pixelTop" ,"top");
KL_LAYER_ATTRS["z"]=new Array("int","zIndex","zIndex","zIndex");
KL_LAYER_ATTRS["w"]=new Array("int","width", "pixelWidth", "width");
KL_LAYER_ATTRS["h"]=new Array("int","height","pixelHeight","height");
KL_LAYER_ATTRS["v"]=new Array("str","visibility","visibility","visibility");
KL_LAYER_ATTRS["bc"]=new Array("str","bgColor","backgroundColor","backgroundColor");
KL_LAYER_ATTRS["bi"]=new Array("str","background","backgroundImage","backgroundImage");
function kl_layer_getattr(id,name,defval){
        var e=kl_getelem(id); if(!e) return defval;
        var attrs=KL_LAYER_ATTRS[name];
        var t;
        if(KL_NS4){
                if(name=="w" || name=="h") t=e.clip[attrs[1]];
                else if(name=="bi") t=e.background.src;
                else t=e[attrs[1]];
        }else{
                //kl_style(e,attrName)でスタイルシートの実効値を取得
                t=kl_style(e,attrs[document.getElementById ? 3 : 2]);
        }
        if(attrs[0]=="int"){
                t=kl_toint(t);
                return (kl_isint(t) ? t : defval);
        }
        if(attrs[0]=="str"){
                return (kl_isstr(t) ? t : defval);
        }
        return t;
}

上の関数を使ってレイヤーの各種属性の取得は以下のように簡単に書くことが できます。

これ以外の属性が必要になった場合はこのコード例に倣って適当に追加して下さい。

【レイヤーの各種属性取得「kl_layer_x/y/width/height/zindex/visibility/bgcolor/bgimage()」＜keynavi_tools.js】

//-----------------------------------------------------------------------------
//kl_layer_x/y/width/height/zindex/visibility/bgcolor/bgimage(id,defval)
//返り値：それぞれの属性値(失敗時はdefval)
//id：対象となるレイヤー(オブジェクト)かそのID
//defval：デフォルト値(略可)
//-----------------------------------------------------------------------------

//レイヤーのX座標を取得、defvalには取得に失敗した場合の値を指定
function kl_layer_x(id,defval){ return kl_layer_attr(id,"x",defval); }

//レイヤーのY座標を取得
function kl_layer_y(id,defval){ return kl_layer_attr(id,"y",defval); }

//レイヤーの巾を取得
function kl_layer_width( id,defval){ return kl_layer_attr(id,"w",defval); }

//レイヤーの高さを取得
function kl_layer_height(id,defval){ return kl_layer_attr(id,"h",defval); }

//レイヤーの奥行きを取得
function kl_layer_zindex(id,defval){ return kl_layer_getattr(id,"z",defval); }

//レイヤーのvisibility値
function kl_layer_visibility(id,defval){ return kl_layer_getattr(id,"v",defval); }

//レイヤーの背景色取得
function kl_layer_bgcolor(id,defval){ return kl_layer_getattr(id,"bc",defval); }

//レイヤーの背景画像取得
function kl_layer_bgimage(id,defval){ return kl_layer_getattr(id,"bi",defval); }

引数「defval」は空でも構いませんが 属性値取得に失敗した場合に代わりに使う値を指定しておく 呼出側での分岐処理がラクです。

【kl_layer_x/y/width/height/zindex()を使ったサンプル】

<script language="javascript" src="http://www.keynavi.net/files/keynavi_ja.js"></script>
<script language="javascript" src="http://www.keynavi.net/files/keynavi_tools.js"></script>
.....
<a href="javascript:void(0)" onclick="alert(kl_layer_x('lay1'));">X座標表示</a>
.....
<div style="position:relative; left:20px; top:10px; width:150px; height:100px; z-index:5;" id="lay1">
レイヤー「lay1」です。
</div>

レイヤー「lay1」です。

Netscape4.xにも対応したい場合は スタイルシートで 「position:absolute」か「position:relative」と指定します。
関連：Netscape4でのレイヤー処理の問題(＜JavaScriptバグ＆回避法リスト)
Netscape4.xでは背景指定についてはインラインで指定したものではなく スクリプト「kl_layer_setbgcolor()」などで設定したもののみ参照できます。

レイヤーの位置を絶対座標で取得するには

上の例ではスタイルシートの指定内容をそのまま取得するものです。 「kl_elem_x/y/width/height()」を使うと実際の値を得られます。

「position:relative; left:20px;」と指定したレイヤーでは 「kl_layer_x()」の結果は「20」となりますが 「kl_elem_x()」の結果はページの先頭から測って例えば「1569」などと成ります。

ボックスサイズについての注意

Mozilla系ブラウザでは スタイルシートで指定するボックスサイズが padding,borderを除いたボックスの中身の巾になるので注意します。 スタイルシートで「-moz-box-sizing : border-box;」等と指定して回避できます。
<style type="text/css" media="all">#lay1 { -moz-box-sizing : border-box; box-sizing:border-box; }</style>
参考：スタイルシートその他の話題（＜HTML,CSSバグ＆回避法リスト）

なお、先述の「kl_elem_width/height()」ではこのオプションの有無に関わらず 外側で測ったサイズが得られます。 また要素の中身が溢れた場合にもstyle属性から得られるサイズは 実際のサイズと異なる(指定時の値になる) ため 実際の値を参照する時はこちらを使用するのをお勧めします。

スタイルシートの実効値の取得：kl_style(e,attr)

一般に「e.style["attr"]」とすると 要素「e」に対し インラインで指定した内容が取得されます。 例えば「<div style="width:300px; height:200px;">...</div>」 などのようにタグ内で「style=」とした内容については「e.style」を使えます。

しかしファイル先頭や別ファイルで指定した内容はこの方法では反映されないため 「e.currentStyle」を使います(IE5+)。 Mozilla系では「getComputedStyle(e).getPropertyValue(attr)」 を使えます。

関数「kl_style(e,attr)」はこれらを抽象化したもので ブラウザ間差異などを気にせずに使えます。

但し旧いブラウザは未対応なのでJavaScriptで操作したい属性については インライン指定をして下さい。




【JavaScript@Keynavi.Net ： レイヤー編：基本 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - レイヤーの表示・非表示切替え：kl_layer_show/hide(id)
  - レイヤーを移動：kl_layer_moveto,by(id,x,y)
  - レイヤーを上下左右/中央寄せ：kl_layer_setpos(is,pos)
  - レイヤーの背景色を指定：kl_layer_setbgcolor(id,...)
  - レイヤーの背景画像を指定：kl_layer_setbgimage(id,...)
  - 前景色(文字色)変更：kl_layer_setfgcolor(id,...)
  - レイヤーの各種属性(位置,大きさ,...)を取得：kl_layer_xxx()
  - ウィンドウリサイズ時のNS4レイヤーバグ回避
  - レイヤーメニューとJavaScriptモジュール化
トップへ戻る [1] Back[Q] ・Top[W] ・Up[E] ・PgUp[R] ・Focus[Ctrl-矢印]  
ホーム KeyNavi対応方法 [0] JavaScript＠Keynavi.Netトップ [1] レイヤーの各種属性(位置,大きさ,...)を取得 ・サイトマップ [Shift-S]
■ キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─