jQueryを使わずともWEBページはゴリゴリ作れるものだ。
そんなコンセプトで、これより簡単なライブラリを小出しに掲載していく事とする。
概要
ページ内の特定のエレメントの近くに、バナーや、何かのオブジェクトを表示させたい時の為に、座標の取得は必要。
ゲームを作る場合には、座標は必ず使うので、このライブラリは是非とも抑えておきたい。
仕様
基本的に無名関数で記述するが、$$LIB変数（グローバル）に格納する。
コンテンツエリアがposition:relativeなどの場合、コンテンツエリアからの座標で良い場合は、引数にコンテンツエリアを指定する事で、より正確な座標が取得できる。
問題点
position:relative 要素を持つ親エレメントがある場合は、座標が正常に取得できない場合があります。
エレメントはセレクタ形式での指定ではなく、直接取得するしかない。※selector機能は別途ライブラリとする。
コード
(function(){
var $$={};
//指定したエレメントの座標を取得
$$.pos = function(e,t){
//エレメント確認処理
if(!e){return;}
//途中指定のエレメントチェック（指定がない場合はbody）
if(typeof(t)=='undefined' || t==null){
t = document.body;
}
//デフォルト座標
var pos={x:0,y:0};
do{
//指定エレメントでストップする。
if(e == t){break}
//対象エレメントが存在しない場合はその辞典で終了
if(typeof(e)=='undefined' || e==null){return pos;}
//座標を足し込む
pos.x += e.offsetLeft;
pos.y += e.offsetTop;
}
//上位エレメントを参照する
while(e = e.offsetParent);
//最終座標を返す
return pos;
};
//グローバル変数へ格納
window.$$LIB = $$;
//プログラム構造を返す（別変数に格納できる）
return $$;
})();
使い方
1,ページ内にscriptタグを記述して、上記コードを記述する。
2,scriptタグ内で下記を実行する事で値を取得できる。
var elm_pos = $$LIB.pos(document.getElementById("hoge"));
//x軸とy軸の画面座標が表示される。※コンソール表示はサンプルです。
console.log(elm_pos.x +" / "+ elm_pos.y);
