■ ライブラリ bytefx を使用する
http://www.devpro.it/bytefx/
<script type="text/javascript" src="../js/lib/bytefx.js"></script>
objX = bytefx.$position(document.getElementById('ID名')).x; objY = bytefx.$position(document.getElementById('ID名')).y;
で取得できます。便利。
■ prototype.js を使う。
1.6系 var offset = $('elementID').positionedOffset() alert ( offset ); // offsetLeft, offsetTopが入った配列 1.5系 var off set = Position.positionedOffset() alert ( offset ); // offsetLeft, offsetTopが入った配列
■ yui(Yahoo! User Interface Library)を使用する方法はこちら
http://www.openspc2.org/JavaScript/Ajax/Ajax_study/chapter81/013/index.html
yui を使うとかなり簡単に座標位置を取得できます。
<script src="js/yahoo.js" type="text/javascript"></script> <script src="js/event.js" type="text/javascript"></script> <script src="js/dom.js" type="text/javascript"></script>
でyuiライブラリを読み込んでおいて
position = YAHOO.util.Dom.getXY("myBox"); alert( position );
で取得できます。
ただし Windows版IE は top,left 共に2pxずつ多めに取得されてしまいますので、
ブラウザ判別をして 2px 引いてあげる必要があります。
また座標位置が正確に取得できないことも多々ありますので注意
参考:ghostbass1.4β - 要素の位置を取得する(正解?)