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

2015年1月16日

Javascript Tips プログラミング

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

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。