相対座標指定のネストしたエレメントの絶対座標を取得する

JavaScript

せっかく書いた日記が綺麗さっぱり消えた･･･

せっかく明日使えないマメ知識を不要な程盛り込んで書いたのに[登録する]ボタンを押したら「サーバが見つかりません」になって戻ってみたら綺麗に空欄になってた(涙)

もう簡単に答えだけ

var xy = YAHOO.util.Dom.getXY("elementId");
var x = xy[0];
var y = xy[1];

// getX, getYという関数もあるが内部的にgetXYを呼んでいるので
// 一気に取得してしまったほうが早い

ざっくり言うと、ネストした要素の絶対座標を取得するには親要素を走査して相対座標を足しこんでいくしかない。その時ある要素にスクロールバーがついていたりするとスクロール位置も加味して座標を計算したり、ブラウザの違いによる挙動を吸収した作りにしなければならない。それを含めてやってくれるのがYUIのDomライブラリにあるgetXY関数でした。

  • 例題1) tdタグの中にあるテキストボックスの絶対座標を求めよ(tableタグの上にbrタグをたくさん入れておくと分かりやすい。画面上、下の方に表示されているテキストボックスのoffsetTopが0とかで取得できるでしょうから)
  • 例題2) 例題1のテーブルをdivで囲ってスクロールバーをつけて、スクロールさせた状態で絶対座標を求めよ
  • 例題3) 例題1, 例題2のテキストボックスと重なるようになんらかのオブジェクト(position:absoluteの色を付けたdivとか)を表示せよ

意図した通りの座標を自力で取得するにはこの例題すらめんどくさい。単純にoffsetTop, offsetLeftでは駄目なのです。