jQueryを使わない方法「エレメントの座標を取得」

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);