Topページ　 >　お勉強　 >　 Ajax　 >　エレメントのX座標、Y座標を取得する　

エレメントのX座標、Y座標を取得する

エレメントのX座標、Y座標を取得します。

prototype.js

使用バージョン：1.5.1　公式サイト

1. ダウンロードしたprototype.jsを読み込みます。


          <script type="text/javascript"

    src="prototype.js"></script>

2. Position.pageメソッドを実行して、対象エレメントの座標がセットされた配列を取得する。


          [HTML]

<div id="targetBox">ここがターゲット</div>

  :

  :

[JavaScript]

// エレメント参照を引数にして、X座標、Y座標を取得する

var targetPosition = Position.page($("targetBox"));

3. X座標を取得するには、Position.pageメソッドの戻り値の配列のインデックス0の要素を使用する。


          // エレメントのX座標を取得する

alert("X座標 = " + targetPosition[0]);

4. Y座標を取得するには、Position.pageメソッドの戻り値の配列のインデックス1の要素を使用する。


          // エレメントのZY座標を取得する

alert("Y座標 = " + targetPosition[1]);

▲

array = Position.page( element );

array	エレメントの座標がセットされた配列
element	座標を取得したいエレメントの参照 ※エレメントのID文字列ではなく、参照を渡す必要があります　○ $("targetBox") 　× "targetBox"