はじめての prototype.js ... 要素の絶対位置の計算方法

要素の絶対位置を計算する。

問題

id="target" 設定している div エレメントのページに左上を (0,0) としたときの (x,y) 座標を得るにはどうすればいいか。

var x=$('target').absoluteLeft;
var y=$('target').absoluteTop;

といった感じで簡単に取得できる方法がありそうな気がしますが、 ちょっと調べてたところ、親要素からの相対的な位置を示す offsetTop,offsetLeft にしか持っていないようです。 であれば、親の親の親・・・という具合に どんどん親要素をたどり、それぞれの要素の offsetLeft,offsetTop の 合計値を計算すれば、絶対位置は計算できそうです。

親要素を全部たどって絶対位置を計算

prototype.js がなければ面倒すぎてあきらめそうになるコーディングですが、 幸い prototype.js には、要素.ancestors() というすべての親要素の配列を返す便利なメソッドがあります。 したがって、
id="target" 設定している div エレメントのページに左上を (0,0) としたときの (x,y) 座標を得るには...
以下のコードで計算できます。

var x=0;
var y=0;

var ele=$('target');
var array=ele.ancestors();

for( var i=0; i<array.length; i++ ){
    var e=array[i];
    x+=e.offsetLeft;
    y+=e.offsetTop;
}

alert(x);
alert(y);

ありがとう！ prototype.js.