要素の位置を取得する

javascript

(追記 2011/5/18)なんか未だにこの記事が参照されてるみたいなので補足。
2011年現在なら各種ライブラリー使った方が良いです。
例えば
YUI2 >> YAHOO.util.Dom.getXY("elementId");
とか
jQuery >> jQuery("#elementId").offset();
とか。下の奴はボーダーとかマージン、パッディングの影響でずれたりしますが、上の2つはそこそこに大丈夫のようです。
どうせ得た位置の近くにダイアログとかバルーンとか表示するでしょ？ならそっちのサポートとかも一緒にしてしまえばいいですよ。




テーブルやdivに囲まれた要素の絶対位置を取得する。



function getElementPosition( e ){

	var p  = {x:0,y:0};

    if( !e.offsetParent ){

        return p ;

    }else{

    }

	p.x = e.offsetLeft;

	p.y = e.offsetTop;

	if(e.parentNode){

		var pp = getElementPosition(e.offsetParent);

		p.x += PixNum( pp.x );

		p.y += PixNum(pp.y );

	}

	return p;

}
[usage]

  • html



<div id="div1">aaaa</div> <!-- このdivの位置を取得したい。-->

  • script



var pos = getElementPosition( document.getElementById('div1') );

alert(pos.x + ":" + pos.y);
戻ってくるのは x,yをプロパティに持つオブジェクト。